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

我想围绕居中图像向左和向右放置文本。请参阅：CSS：围绕居中图像左右放置文本

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

我想通了如何中心整件事，但我想要的形象被死中心，并相应地调整文字。

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

感谢

来源

2017-05-04 noIdeaAtAll

您可以在父用flex，然后flex-grow（或flex: 1 0 0的简称）对文本的div所以他们将填补所有的图像遗留下来的可用空间（把图像中的中心），然后在第一个范围内使用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>

来源

2017-05-04 16:14:03

为了达到预期的效果，请使用以下选项 - 显示：弯曲的水平和垂直方向

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

来源

2017-05-04 16:16:35

您可以创建一个没有3列和1行边界的表格。在第一个单元格和最后一个单元格中，您将自己的文本放置在想要的位置;在中央放置图像：

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

来源

2017-05-04 16:19:42 EmLe49

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

回答

相关问题