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