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

Question

我想要一个头像图片，右侧有两个 div 垂直对齐。

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

我已经阅读了很多关于此的帖子，但其中 none 似乎对我有所帮助。

让图像位于左侧的最佳方法是 div (header) 主宽度的 30%，并且 info div 70%?

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

我尝试了很多选择：float: left avatar div，display: inline-block avatar 和 info，width: 30% and 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

您可以使用 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

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

Two divs aligned vertically next to an image

css

vertical-alignment

fluid-layout