Question

我想拥有一个头像，右边有两个与它垂直对齐的div。

https://jsbin.com/qafiroquve/1/edit?html,css,output

我已经阅读了很多这方面的帖子，但它们似乎都没有帮助我。

使用30％的主要div（header）宽度以及info div为70％的图像在左侧显示图像的最佳方法是什么？

如果info div（name或position）中的任何一个文本太多，我希望info div与其左侧的图像垂直对齐。我还希望这个info div与图像有一个边距。

我尝试了很多选项：float: left div上的avatar，display: inline-block和avatar上的info，width: 30% and 40%。我不想为此目的使用bootstrap，因为它使事情变得复杂，我希望尽可能简单。

Answer 1

你可以使用table-cell @ w3debugger建议的方法，或者你可以利用快速的css hack来垂直对齐：

.yourclass{
    position:absolute;
    top: 50%;
    transform: translateY(-50%)
}

但是.yourclass的父级必须是position:relative并且类型为display:block;如果你的父级是阻塞，它将占据其中的区块的高度，所以位于.yourclass旁边的头像也需要display:block，

我编辑了你的例子：

HTML：

<div class="header">
    <div class="avatar">
      <img src="http://i.imgur.com/pBcut2e.jpg" />
    </div><div class="info">
        <div class="name">Important person here </div>
        <div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div>
    </div>
</div>

CSS：

.header {
    width: 500px;
    background: aqua;
    margin: 0 auto;
    padding: 10px;  
    position: relative;
}
.avatar img {
  width: 30%;
  border-radius: 50%;
}
.info{
  box-sizing: border-box;
  padding: 0 40px;


  width: 70%;

  position:absolute;
  right: 0;

  vertical-align: top;
  top: 50%;
  transform: translateY(-50%)

}

实时预览：

https://jsbin.com/gogewefizo/1/edit?html,css,output

Answer 2

不幸的是，vertical-align无法与float元素一起使用。您应该使用display: table-cell或`display：inline-block来满足您的要求。

请检查以下代码。

.header {
  width: 500px;
  background: aqua;
  margin: 0 auto;
  padding: 10px;
  display: table;
}
.avatar img {
  width: 150px;
}
.avatar,
.info {
  display: table-cell;
  vertical-align: middle;
}

<div class="header">
  <div class="avatar">
    <img src="http://i.imgur.com/pBcut2e.jpg" />
  </div>
  <div class="info">
    <div class="name">Important person here</div>
    <div class="position">CHIEF DIGITAL STRATEGIST &amp CO-FOUNDER</div>
  </div>

</div>

在图像

2 个答案: