html中⼼对齐,Html5居中对齐的⽅法text-align:center;
text-align: center; 使标签内部的⽂本居中 是可遗传的
div{
text-align: center;
width: 300px;
height: 100px;
background: #3EFD9B;
}
我是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{
text align center
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。