0

我有一张图片，右边有三行文字。文本以该行的剩余空间为中心，但我想将其在页面上居中，以便所有文本都居中（图像下方的文本看起来不错）。这可能吗？

<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

谢谢

4

2 回答 2

0

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

于 2013-07-09T19:41:48.160 回答
0

你说的“中心”是什么意思？垂直？所以使用例如'line-height：100px'和'vertical-align：middle'。

position:relative 在这种情况下没有意义。使用 float:left 将两个 div 并排放置（从左侧开始）和 clear:both （如前所述），继续将 div 定位在这两个下。

编辑：

一种解决方案：

<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>

pro : 文本以页面为中心

对比：如果文本太宽，它会隐藏在 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>

pro : 无论多长时间都会显示文本

contra：文本不以页面为中心，而仅以周围的 div 为中心

于 2013-07-09T19:51:53.707 回答