对齐 HTML 和 CSS 中的 3 张图像，而不对齐 table

Question

我正在尝试对齐 2 张图片和一些文本。我不想使用 table 来执行此操作。

有没有办法使用内联样式来实现？我也希望它们的间距都相等。

IMG 1 > 文本 > IMG 2

希望这是有道理的

Answer 1

试试这个，

已更新

div {
    text-align: justify;
    display:table;
}

span{
    display:table-cell;
    vertical-align:middle;
    padding:0 60px;
}

<div>
 <img src="http://www.raisedeyebrow.com/sites/www.raisedeyebrow.com/files/blog/2012/01/fff.png" alt=""  /> 
 <span>Text Here</span>
 <img src="http://www.raisedeyebrow.com/sites/www.raisedeyebrow.com/files/blog/2012/01/fff.png" alt="" />
</div>

Answer 2

你可以用 flexbox 做到这一点：

HTML

<div>
    <img />
    <p>text</p>
    <img />
</div>

CSS

div {
    display: flex;
    justify-content: center;
}

更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

对齐 HTML 和 CSS 中的 3 张图像，而不对齐 table

aligning 3 images in HTML and CSS without table

html

css

styling