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

debugcn 发表于 Dev

弗拉德

我想有一个化身图像，其右侧有两个垂直对齐的div。

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

我已经阅读了很多关于此的文章，但似乎没有一个对我有帮助。

什么是使图像左侧占主要divheader宽度（％）的30％，而div占其主要宽度info70％的最佳方法？

如果infodiv（name或position）中的任何一个文本太多，我希望infodiv与左侧的图像垂直对齐。我还希望该infodiv在图像上留出一定的余量。

我试过这么多的选择：float: left在avatarDIV，display: inline-block两个avatar和info，width: 30% and 40%。我不想为此使用引导程序，因为它会使事情变得复杂，并且我希望使其尽可能简单。

您可以使用table-cell@ w3debugger的建议方式，也可以利用快速的CSS技巧垂直对齐：

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

但这需要其父对象.yourclass为beposition:relative和be的类型。display:block;如果您的父对象为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，输出

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。