让一排图片水平居中对齐

先来理解一下

  1. 块级元素:独占一行,可以理解为是一个方块面,有宽高。常见的块级元素有:div p h1…h6 ul ol form table address…….
  2. 行级元素:可以与其他行级元素共享一行,可以理解为一条线,行级元素内容罗列在这条线上,我们所看到的宽高是内容的宽高,行级元素本身没有宽高。常见的行级元素有:span i em a input textarea。。。。

如何让一排图片水平居中呢?

如果给块级元素或者行级元素添加这个属性会有什么效果呢?
如果父级是块块级元素并且给父级添加text-align:center属性,那么作为自己的块级元素并不会水平居中,但是把这个子级的块级元素转换为行内块就可以水平居中显示了;作为子级的行级元素会在同一行且水平居中显示。
所以要想让一排图片水平居中只需要给父级使用text-align的center属性子集用行级元素包裹图片,就可以实现一排图片水平居中对齐了。

    原文作者:无事夏迎春吖
    原文地址: https://segmentfault.com/a/1190000018509453
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞