如何让 div 中的文字居中
在 div 元素中居中文字有几种方法:
1. text-align 属性
<code class="<a style="max-width:90%" href=" https: target="_blank">css">div { text-align: center; }</code>
此属性设置 div 中所有文本元素的对齐方式为居中。
2. margin: auto;
<code class="css">div { margin: auto; text-align: justify; }</code>
此方法设置 div 的文本元素在水平方向自动居中。它与 text-align: justify;
属性结合使用,可实现垂直和水平居中。
3. table 单元格
<code class="css">div { display: table; } div p { display: table-cell; text-align: center; vertical-align: middle; }</code>
此方法将 div 设置为 table,并将其中的文本元素设置为 table 单元格。通过设置单元格的对齐方式为居中,可以实现文字居中。
4. flexbox
<code class="css">div { display: flex; justify-content: center; align-items: center; }</code>
此方法使用 flexbox 布局,通过设置 justify-content
和 align-items
属性分别在水平和垂直方向上将子元素居中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。