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>

我想出了如何使整个事物居中，但我希望图像处于居中状态并相应地调整文本。

尝试浮动，但我没有得到正确的结果。有什么想法吗？

由于

Answer 1

您可以在父级上使用flex，然后在文本div上使用flex-grow（或简称为flex: 1 0 0），这样它们就会填充图像留下的所有可用空间（将图像放在中心），然后在第一个跨度中使用text-align将文本放在图像上。我还将你的img包裹在img以来的元素中，因为弹性儿童通常会伸展。

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 个答案: