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

Basically I want the text to always be centered in the middle. With one image on either side that resize depending on how large the page is to take up all the white space. This is what I have so far.

基本上我希望文本始终位于中间。根据页面占据所有空白区域的大小，每侧调整一张图像。这就是我到目前为止所拥有的。

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

I would like to remove the width: 33% and for the images to resize to fit the space. Keep in mind it needs to be forced to stay on one line.

我想删除宽度：33％并为图像调整大小以适应空间。请记住，它需要*留在一条线上。

Thanks

谢谢

2 个解决方案

#1

You can use table and table-cell for display, or just classic html table.

您可以使用表格和表格单元格来显示，或者只使用经典的html表格。

There is example using table and table-cell for display (there is added extra divs for images and header) :

有一个使用table和table-cell进行显示的例子（为图像和标题增加了额外的div）：

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

#2

You can wrap images inside div containers like this:

您可以将图像包装在div容器中，如下所示：

<div style="text-align:center;">
   <div class="left"> <img src="img/pulse.gif"/></div>
        <h1>Safety</h1>
<div class="right">
    <img src="src="img/pulseR.gif"/></div>

https://jsfiddle.net/uv85304v/

#1