两个div在图像旁边垂直对齐

Question

我想拥有一个头像,右边有两个div,与它垂直对齐.

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

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

将图像放在左边的主要div(header)宽度的30%,以及info70%的div 的最佳方法是什么？

如果其中一个infodiv(name或position)文本太多,我希望infodiv与其左侧的图像垂直对齐.我也希望这个infodiv与图像有一个边距.

我试过这么多的选择:float: left在avatarDIV,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%)
}

但这需要.yourclassbeposition:relative和 be 类型的父级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,输出