html - 当标题标签很大时，按钮会在下方移动

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>

当标题变大时， anchor Edit Profile 会移到下方。

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

注意:请确保您调整移动设备大小以查看问题..

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/