inline-block和block元素水平居中显示

81 阅读 0 评论 54 点赞

我是靠谱客的博主如意蛋挞，最近开发中收集的这篇文章主要介绍inline-block和block元素水平居中显示，觉得挺不错的，现在分享给大家，希望可以做个参考。

http://jingyan.baidu.com/article/e2284b2b67b5f1e2e6118d22.html

一般来说，在页面中需要进行水平居中的元素，大致分为两种，一种是块级元素，即display:block，一种是行内元素display:inline-block;

块级元素包括div，ul，p,以及所有的h类标签。行内元素又叫内联元素，a，img，input是最常见的。这些行内元素，可以通过display:block转换成块级元素。

弄明白了哪些是块级元素，哪些是行内元素，我们还要知道其主要区别，两个行内元素可以在一行显示，但是第二个块级元素只能换行显示。

让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。

让块级元素，水平居中的办法是为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的，也就可以在是水平方向上居中了。

不管是inline-block还是block，我们需要理解其居中的原理，是inline-block，就对其父级元素添加text-align:center，是块级元素就对其本身添加margin:0 auto;记住了这些，以后再对元素进行居中，居左，居右的时候就不用担心自己不会啦。

以上就是如意蛋挞为你收集整理的inline-block和block元素水平居中显示的全部内容，希望文章能够帮你解决inline-block和block元素水平居中显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。