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

Question

基本上我希望文本始终居中。两边各有一张图片，根据页面的大小调整大小以占据所有白色 space。这是我目前所拥有的。

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

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

谢谢

Answer 1

您可以像这样将图像包裹在 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/

Answer 2

您可以将 table 和 table-cell 用于 display，或者仅使用经典 html table.

有使用 table 和 table-cell 用于 display 的示例（添加了额外的 divs 用于图像和 header）：

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

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

html fitting text in between two images that resize

html

css

text

center

image-resizing