我目前有这个:

html - 使用浮点后使div居中-LMLPHP

我想实现这一目标:

html - 使用浮点后使div居中-LMLPHP

基本上将内容垂直居中。我尝试过:

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


只是似乎没有到达那里。

https://jsfiddle.net/pjvxh34h/

它对我的摆弄如何:

html - 使用浮点后使div居中-LMLPHP

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>

最佳答案

如果将大多数div更改为span,则使用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;
}

10-05 20:56
查看更多