春季来好快，悄无声息不知不觉中，草儿绿了，枝条发芽了，遍地野花油菜花开灿烂多姿，一切沐浴着春晨曙光，春风中摇弋轻摆，仿佛少女轻歌曼舞，楚楚动人。
其实很简单，只需要在尾部增加一个<i></i> ，然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle;
看看效果图
实例代码
复制代码
代码如下:<style>
*{
margin:0 ;
padding:0;
}
.bg{
background-color:#333;</p> <p> text-align:center;
}
.bg img{
vertical-align:middle;</p> <p> }
.test-list{
background-color:#999;
height:100px;
}
.test-list > span{ display:inline-block; width:210px; vertical-align:middle}
.test-list > img{ display:inline-block; vertical-align:middle}
.justify-fix{
display:inline-block;
width:250px;
border-bottom:1px solod #F00}
#p{
text-align:center}
#p span{
display:inline-block; vertical-align:middle;</p> <p>}
#p i{
display:inline-block;
height:100%;
vertical-align:middle}
</style>
</head></p> <p><body>
<p class="bg">
display: block;
<img src="<a rel="nofollow noopener noreferrer" href="https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png">https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png</a>" />
</p>
<div class="test-list">
<span>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</span>
<img src="<a rel="nofollow noopener noreferrer" href="https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png">https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png</a>" />
</div>
<p style="text-align:justify; background-color:#666; line-height:0">
<img src="<a rel="nofollow noopener noreferrer" href="https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png">https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png</a>" width="250"/>
<img src="<a rel="nofollow noopener noreferrer" href="https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png">https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png</a>" width="250"//>
<img src="<a rel="nofollow noopener noreferrer" href="https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png">https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png</a>" width="250"//>
<img src="<a rel="nofollow noopener noreferrer" href="https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png">https://cdnss.haodaima.top/uploadfile/2023/0602/20230602022402961.png</a>" width="250"//>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
</p>
<br/>
<p style="background-color:#666; height:200px;" id="p">
<span>第一行<br/>1313</span><i></i><span>第一行<br/>1313</span></p> <p></p>
</body>
总结
以上就是这篇文章的全部内容了，希望对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
