html5的水平居中对齐,Html5居中对齐的方法

text-align:center;

text-align: center; 使标签内部的文本居中 是可遗传的布局

div{3d

text-align: center;调试

width: 300px;blog

height: 100px;it

background: #3EFD9B;class

}方法

im

我是div

如图：

text-align: center; 他的属性不单单只是让里面的文本居中文本级标签也是能够居中的

div{

text-align: center;

width: 300px;

height: 100px;

background: #3EFD9B;

}

span{

background: #2db5bc;

}

我是div

如图：

里面的行内块级标签也是能够用这个方法居中的 至于为何我也不是很清楚还望有知道的能够评论

div{

text-align: center;

width: 300px;

height: 100px;

background: #3EFD9B;

}

h{

display: inline-block;

background: #2db5bc;

}

我是div

如图

最喜欢用的仍是 margin: 0 auto; 首先须要实际的宽度 还须要是块级元素 行内块级不行哦

另外发现没有  里面的strong这个标签是没有居中的哦

也就是说 margin: 0 auto; 是不会被遗传的

div{

width: 300px;

height: 100px;

background: #3EFD9B;

margin: 0 auto;

}

strong{

display: block;

width: 50px;

height: 50px;

background: #2db5bc;

}

我是strong

因此我通常都喜欢  一个通变符(星号) *{ margin: 0 auto;}这样只要我给了它实际的宽度他就本身居中了

*{

margin: 0 auto;

}

div{

width: 300px;

height: 100px;

background: #3EFD9B;

/*margin: 0 auto;*/ /*这里就能够不写了*/

}

strong{

display: block;

width: 50px;

height: 50px;

background: #2db5bc;

}

我是strong

固然垂直也是能够居中的 但我只知道line-height:调试到居中就好;大多数都是相对于那个标签居中就调成和它的高度一致   可遗传

div{

width: 300px;

height: 100px;

background: #3EFD9B;

margin: 0 auto;

line-height: 100px;

}

我是strong

固然还有不少列入flex布局center;justify-content水平居中align-items:center垂直居中 就不说了 那个是flex