浮动图像旁边的居中文本

Question

我有一张图片，右边有三行文字。文本在一行的剩余空白处居中，但我想让它在页面上居中，这样所有文本都居中(图像下面的文本看起来很好)。这个是可能的吗？

<div style="position:relative">
<img src="RGB2748.jpg" style="float:left;" width="70" />
</div>

<div style=" height:10px; font-size:22px; text-align:center;">Text</div>
<div style="height:10px; font-size:20px; text-align:center;">Text</div> 
<div style="height:10px; font-size:16px; text-align:center;">Text</div>
...
...
More text   

谢谢

Answer 1

你说的“中心”是什么意思？垂直的？所以使用'line-height:100px‘和'vertical-align: middle’就可以了。

位置:relative在这个上下文中没有意义。使用float:left并排放置两个div(从左侧开始)和clear:both (如上所述)，继续在这两个div下定位div。

编辑：

one解决方案：

<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
    <img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
    Text
</div>
<div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div> 
<div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>

优点:文本居中到页面

contra:如果文本太宽，它将隐藏在img下的部分中

修改了第一个解决方案(如果你喜欢这样的话)：

<div style="height:50px; font-size:22px; text-align:center; position:relative; width: 100%;">
    <img src="RGB2748.jpg" style="position:absolute; top:0; left:0; width: 70px" />
    <div style="height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
    <div style="height:50px; font-size:20px; text-align:center; width: 100%;">Text</div> 
    <div style="height:50px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>

另一种解决方案：

<div style="background: lightblue; width: 10%; float:left;">
    <img src="RGB2748.jpg" style="float: left; width: 70px;" />
</div>
<div style="background: lightgray; width: 90%; float:left;">
    <div style="line-height:50px; font-size:22px; text-align:center; width: 100%;">Text</div>
    <div style="line-height:100px; font-size:20px; text-align:center; width: 100%;">Text</div> 
    <div style="line-height:10px; font-size:16px; text-align:center; width: 100%;">Text</div>
</div>
<div style="clear:both;">following text</div>

优点:无论文本有多长，都会显示出来

contra:文本不会居中到页面，而只能居中到周围的div

Answer 2

将clear:both添加到第一个文本块/div的样式。