Question

我正在尝试使文字显示如附图所示：

Answer 1

如果您只想支持'modern' browsers，那么就可以使用弹性框了。

基本上你需要一个像这样的父容器：

<div id="parent">

    <!-- child elements here -->

</div

与css样式类似：

#parent {display: flex; align-items: center; justify-content: space-around; height: 400px;}

确保为此父容器设置高度（以及子元素的高度和宽度较小）。

然后该容器中的子元素将水平和垂直居中。

（您可以在此处查看有关flexbox css的详细摘要http://css-tricks.com/snippets/css/a-guide-to-flexbox/）

Answer 2

在图片中制作一个，看看这是否是您正在寻找的http://jsfiddle.net/azounfvd/1/

HTML

<div id="a">
<img src="http://placekitten.com/300/301"/>
<p>"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco   laboris
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
 in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>

CSS

#a{
width:700px;
height:350px;
border:1px solid;
}

img{
float:right;
}

p{
margin: 50px auto;
}

Answer 3

您不需要使用表格，只需display:table和display:table-cell：在这里http://jsfiddle.net/nwder8qy/

vertical-align：中间不使用表格

3 个答案: