我想拥有一个头像,右边有两个div,与它垂直对齐. https://jsbin.com/qafiroquve/1/edit?html,output 我已经阅读了很多这方面的帖子,但它们似乎都没
... . . 我想拥有一个头像,右边有两个div,与它垂直对齐.
https://jsbin.com/qafiroquve/1/edit?html,output
我已经阅读了很多这方面的帖子,但它们似乎都没有帮助我.
将图像放在左边的主要div(标题)宽度的30％,以及70％的信息div的最佳方法是什么？
如果任何一个信息div(名称或位置)文本太多,我希望信息div与其左侧的图像垂直对齐.
我也希望这个信息div与图像有一个边距.
我已经尝试了很多选项：浮动：在头像div上留下,显示：在头像和信息上的内联块,宽度：30％和40％.我不想为此目的使用bootstrap,因为它使事情变得复杂,我希望尽可能简单.
.解决方法
. 你可以使用@ w3debugger建议的表格单元格,或者你可以利用快速css hack来垂直对齐：
.yourclass{ position:absolute; top: 50%; transform: translateY(-50%)} 但是,需要.yourclass的父级为position：relative,并且类型为display：block;如果您的父级是阻止它将占据其中的块的高度,因此.yourclass旁边的头像需要显示：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 & 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,output
. . .. ...