两个垂直排列在图像旁边的div

Question

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

https://jsbin.com/qafiroquve/1/edit?html，css，输出

我读过很多关于这方面的帖子，但似乎没有一篇对我有帮助。

将图像放在左侧的30%主div（标题）宽度和信息div的70%宽度的最佳方法是什么？

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

我尝试了很多选项：float:leftonavatardiv，display:inline blockonavatar和info，宽度：30%和40%。我不想使用bootstrap来实现这个目的，因为它使事情变得复杂，我想让它尽可能简单。

Answer 1

不幸的是，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>

Answer 2

您可以使用@w3debugger建议的表格单元格方式，也可以利用快速css技巧垂直对齐：

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

但这需要的父级。你的类是位置：相对，并且是类型显示：块；如果你的父级是块，它将取其内部块的高度，所以化身，就是下一个到。你的类需要是显示：块以及，

我编辑了您的示例：

超文本标记语言：

<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，输出