CSS：在居中图像周围左右放置文本

Question

我想在居中图像的左侧和右侧放置文本。 看到：

<div style="position:relative; display: table; margin: 2em auto;">
    <span>TEXTSAMPLE 12345</span>
    <img src="http://placehold.it/350x150" style="height: 4em;">
    <span>12345</span>
 </div>

我想出了如何使整个内容居中，但我希望图像不居中并相应地调整文本。

尝试使用float，但我没有得到适当的结果。 有任何想法吗？

谢谢

Answer 1

您可以在父级上使用flex ，然后在text div上使用flex flex-grow （或简称为flex: 1 0 0 ），这样它们将填充图像剩余的所有可用空间（将图像置于中心），然后在第一个跨度中使用text-align可以按图像放置文本。 我也将您的img包裹在一个元素中，因为img是因为flex子项通常最终会拉伸。

 div { display: flex; } span:not(.img) { flex: 1 0 0; } span:first-child { text-align: right; }

 <div> <span>TEXTSAMPLE 12345</span> <span class="img"><img src="http://placehold.it/350x150" style="height: 4em;"></span> <span>12345</span> </div>

Answer 2

要获得预期结果，请使用以下选项-display：flex将内容水平和垂直居中

CSS：

html,body{
  height:100%;

}
body, div{
  display:flex;
  align-items:center;
  justify-content:center;
}

HTML：

<body>
<div>
    <span>TEXTSAMPLE 12345</span>
    <img src="http://placehold.it/350x150" style="height: 4em;">
    <span>12345</span>
 </div>
</body>

Codepen- https: //codepen.io/nagasai/pen/vmeYzb

Answer 3

您可以创建一个无边框的3列1行表格。 在第一个和最后一个单元格中，根据需要放置文本； 在中央放置图片：

<table>
<tr>text 1</tr>
<tr><img...></tr>
<tr>text 2</tr>
</table>

CSS：在居中图像周围左右放置文本

问题描述

3 个解决方案

解决方案1
2 已采纳 2017-05-04 16:14:03

解决方案2
0 2017-05-04 16:16:35

解决方案3
0 2017-05-04 16:19:42

CSS：在居中图像周围左右放置文本

问题描述

3 个解决方案

解决方案1 2 已采纳 2017-05-04 16:14:03

解决方案2 0 2017-05-04 16:16:35

解决方案3 0 2017-05-04 16:19:42

解决方案1
2 已采纳 2017-05-04 16:14:03

解决方案2
0 2017-05-04 16:16:35

解决方案3
0 2017-05-04 16:19:42