Question

我正在移动网站上工作，我的代码如下所示。

<div class="profile-div-wrapper">
   <div class="profile-div">
    <div class="header">
     <img src="assets/images/image.png" alt=""><h3 id="txtDisplayUserName">Surajjjjjjjjjjj Shukla</h3>
     <a href="update_user_profile.html" class="bttn3">Edit Profile</a>
    </div>
   </div>
</div>

当标题较大时，锚编辑配置文件会在下方移动。

Here's同样的小提琴。可以做些什么来解决这个问题？

注意：请确保您制作移动设备尺寸的小提示以查看问题..

Answer 1

CSS

尝试将其添加到现有代码中：

.profile-div .header {
  display: flex;
  align-items: center;
}
.profile-div .header a.bttn3 {
  margin-left: auto; //instead of float: right;
  display: flex; //instead of display: block;
  //to vertically & horizontaly align the text inside the button
  align-items: center;
  justify-content: center;
}

https://jsfiddle.net/o3Lfprw6/2/

当标题标签很大时，按钮会在下面移动

1 个答案: