Html 居中浮动图像旁边的文本

我有一个右边有三行文字的图像。文本在行的剩余空间上居中，但我想在页面上居中，使所有文本居中（图像下方的文本看起来不错）。这可能吗

<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   

正文
正文
正文
...
...
更多文本

---

谢谢

在第一个文本块/分区的样式中添加

clear:both

。

您所说的“中心”是什么意思？垂直地因此，使用例如“线高度：100px”和“垂直对齐：中间”

在这种情况下，position:relative没有意义。使用float:left（浮动：左）将两个div并排放置（从左侧开始）和clear:TWEET（清除：两个）（如上所述）将div继续放置在这两个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>

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

正文
正文
正文

赞成：文本居中于页面中央

相反：如果文本太宽，它将隐藏在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" />
    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 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>

正文
正文
正文

另一种解决方案：

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

<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：无论文本有多长，都将显示文本

---

相反：文本不居中于页面，而仅居中于周围的div

如果不希望文本环绕，为什么要浮动IMG标记？谢谢-这会居中，但会将文本移到图像下方-我确实希望它位于图像右侧，仅居中于页面上。您需要浮动图像周围的div，而不是图像本身。你还需要给DIV一个固定的宽度。对不起，我的意思是水平的。图像下方的文本在页面上居中，我希望直接位于图像右侧的文本也在页面上居中（好像图像不在那里）。问题是：定位第一个div relative，这样您就可以将img定位在这个div absolute内（将top和left设置为0，将其放在左上角）。我添加了宽度，这样您的div就被强制放置在彼此下面。你也可以选择使用clear：两个都适用于每个div.Sweet Moses，就是这样。谢谢你，萨沙！（也谢谢你的解释）