在制作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;记住了这些,以后再对元素进行居中,居左,居右的时候就不用担心自己不会啦。
-