我在以下html和css的中心对齐文本时遇到了一个大问题：
的HTML：
<article class="item-page">
<p>
text-align not working...
</p>
</article>
CSS：
article {
display: table-row;
color: #f00;
}
p{
text-align: center;
}
关键问题是因为使用
display: table-row;。
使用display:table;width:100%它的父对象，则只有p也是行为，因为它是100％宽，然后它的宽度可以居中对齐：
的HTML：
<main>
<article class="item-page">
<p>
text-align not working...
</p>
</article>
</main>
CSS：
main{
display: table;
width: 100%;
}
article {
display: table-row;
color: #f00;
}
p{
text-align: center;
}
为什么会这样呢？
因为当内容在表格布局内部时，宽度会根据内容宽度动态变化（即，宽度是自动的），并且将表格设置为100％可以确保宽度为100％。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句