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

【问题标题】：html fitting text in between two images that resizehtml在调整大小的两个图像之间拟合文本
【发布时间】：2015-12-02 04:48:09
【问题描述】：

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

<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% 并调整图像大小以适应空间。请记住，它需要强制保持在一条线上。

谢谢

【问题讨论】：

看来您正在寻找一个 css 表。虽然弹性框或列也可以工作，但我的钱在桌子上。
你做错了。将图像包装在容器内并使其灵活。将文本放在图像容器之间。

标签： html css text center image-resizing

【解决方案1】：

您可以将table 和table-cell 用于display，或者只使用经典的html table。

有使用table 和table-cell 的例子display（还有额外的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>

【讨论】：

【解决方案2】：

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

【讨论】：