想在段落之间对齐图像

Question

我只是通过css在2段之间的图像中心对齐，所以如果有人解决了这个问题，那么请告诉我。

HTML

  <div class="container">
    <p class='first'>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    </p>
    <img src='https://placehold.it/200x200'/>
    <p class='second'>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    </p>
</div>

Answer 1

希望这对你有所帮助：

HTML code：

<div id="footer">
<span>Text</span>
<span><img src="http://www.klm.com/jobs/nl/images/icon_flight_32x32_tcm701-312701.gif" /></span>
<span>More text</span>
</div>

CSS代码：

#footer {
width: 100%;
display: table;
table-layout: fixed;
background: gray;
}
#footer span {
display: table-cell;
}
#footer span:nth-child(2) { text-align: center; }
#footer span:last-child { text-align: right; }

Answer 2

没有一些标记很难提供帮助，但你不能浮动中心，所以最好做这样的事情;

<style>
    .grid-three{
        width:33.33%;
        display:block;
        float:left;
    }
</style>

<p class="grid-three">blah blah...</p>
<img class="grid-three" src="blah" />
<p class="grid-three">blah blah...</p>

这是一个非常简单的配置 - 您可能希望尝试以更好的方式响应性地工作。

您还可以将img交换为包含图像的div，以允许图像保持原始大小，并且您还可以尝试应用单独的宽度（如每个p的40％和img块的20％）。

测试一些想法！

Answer 3

试试这个

＆＃13;

＆＃13;

dir

＆＃13;

.row > div{
        display: inline-block;
        width: 30%;
      vertical-align: middle;
    
    }

＆＃13;

＆＃13;

＆＃13;