使用浮子后居中div

Question

我目前有这个：

我想实现这个目标：

基本上将内容垂直居中。我试过了：

display: table-cell;
vertical-align: middle;

似乎没有到达那里。

https://jsfiddle.net/pjvxh34h/

它如何适合我：

的CSS：

div.avatar-name-signout-container {
  background:lightblue;
  height:100px;
  width:300px;
}

div.avatar-name {
  float: right;
  background: lime;  
}

div.avatar {
    display:inline-block;
    background-size: contain;
    width: 50px;
    height:50px;
    background-image: url('http://diondifc.com/img/team_pic1.jpg');
}

div.name {
  float:right;
}

div.signout {
  float:right;
}

HTML：

<div class="avatar-name-signout-container">
    <div class="signout">
      sign out
    </div>
    <div class="avatar-name">
      <div class="avatar"></div>
      <div class="name">Karl</div>
    </div>
  </div>

Answer 1

如果将大部分div更改为跨度，则使用line-height属性更容易控制它们，并垂直对齐它们。检查JsFiddle

<强> HTML

<div class="avatar-name-signout-container">
    <span class="signout">
      sign out
    </span>
    <span class="avatar-name">
      <span class="avatar"></span>
      <span class="name">Karl</span>
    </span>
</div>

<强> CSS

div.avatar-name-signout-container {
  background:lightblue;
  height:100px;
  line-height:100px;
  width:300px;
}


.avatar-name {
    display: inline;
    float: right;
    background: lime;  
    margin-top: 20px;
    line-height: 60px;
}

.avatar {
    display:inline-block;
    background-size: contain;
    width: 50px;
    height:50px;
    background-image: url('http://diondifc.com/img/team_pic1.jpg');
    vertical-align: middle;
}

.name {
  float:right;
}

.signout {
  float:right;
}

Answer 2

可能最简单的方法是根本不使用浮子。

如果您修改HTML并将所有内容设置为display:inline-block，则可以使用text-align和vertical-align对其余内容进行修改。

＆＃13;

＆＃13;

div.avatar-name-signout-container {
  background: lightblue;
  height: 100px;
  width: 300px;
  text-align: right;
}
div.avatar-name {
  background: lime;
  display: inline-block;
}
div.avatar {
  display: inline-block;
  background-size: contain;
  width: 50px;
  height: 50px;
  background-image: url('http://diondifc.com/img/team_pic1.jpg');
  vertical-align: middle;
}
div.name {
  display: inline-block;
  vertical-align: middle;
}
div.signout {
  display: inline-block;
}

＆＃13;

<div class="avatar-name-signout-container">

  <div class="avatar-name">
    <div class="avatar"></div>
    <div class="name">Karl</div>
  </div>
  <div class="signout">
    sign out
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您也许可以使用margin-top:50px;来解决此问题。

如果有帮助，请标记为答案。