调整大小的两个图像之间的html适合文本

Question

基本上我希望文本始终居中。两侧各有一个图像，可根据页面占用所有空白区域的大小调整大小。这是我目前所拥有的。

<div style="text-align:center;">
        <img style="float: left; width: 33%; margin:20px 0 0 0;" src="img/pulse.gif"/>
        <img style="float: right; width: 33%; margin:20px 0 0 0;" src="img/pulseR.gif"/>

        <h1 style="display:inline; vertical-align: middle; text-align: center; width: 33%;">Safety</h1>
    </div>

我想删除 width: 33% 并调整图像大小以适应空间。请记住，需要强制它保持在一条线上。

谢谢

Answer 1

您可以使用 table 和 table-cell 来显示，或者只是经典的 html table。

有使用 table 和 table-cell 进行 显示 的示例(为图像添加了额外的 divs和标题):

.container
{
    width:100%;
    display:table;
    margin-top:20px;
}
.container div
{
    display:table-cell;
    text-align:center;
    vertical-align:top;
}
.container img
{
    width:100%;
    height:100%;
}

<div class="container">
    <div><img src="http://placehold.it/350x350"/></div>
    <div><h1>Safety</h1></div>
    <div><img src="http://placehold.it/350x350"/></div>
</div>