让图片和文字居中对齐的方法

最新推荐文章于 2026-05-12 14:32:16 发布

原创最新推荐文章于 2026-05-12 14:32:16 发布 · 1.2w 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#inline-block #图片和文字居中对齐 #css #行内元素 #css图片和文字居中

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在网页布局中使文字与图片在水平线上垂直居中对齐的方法，通过使用CSS的vertical-align:middle属性，并针对不同元素适当添加display:inline-block，实现了文字始终对齐图片中间的效果。

如果一个盒子图片，文字，在同一行上，怎么实现文字始终对齐图片的中间位置呢？
方法就是使用vertical-align:middle;也就是给盒子都使用这个属性，需要注意的是：这个属性只对行内元素起作用,如果不是行内元素要加上diaplay:inline-block;

示例代码：
<div>
           <img src="img/0.png">
           <span>文字文字文字</span>
           <input type="checkbox" name="" id="" value=""/>
</div>

css样式设置：

  img {
               padding-left: 0;
               vertical-align: middle;
               width: 100px;
               height: 100px;
           }

           span {
               vertical-align: middle;
               padding-left: 0;
           }

           input {
               vertical-align: middle;
               display: inline-block;
               width: 50px;
               height: 50px;
           }