我们可以轻松地将文本在 div 内水平和垂直居中。让我们一一看看。
使用 text-align 属性将 Div 中的文本水平居中
要将 div 中的文本水平居中，请使用 text-align 属性。 text-align 属性确定行框在块级元素内的对齐方式。以下是可能的值 –
left – 每个行框的左边缘与块级元素内容区域的左边缘对齐。
right – 每个行框的右边缘与块级元素内容区域的右边缘对齐。
center – 每个行框的中心与块级元素内容区域的中心对齐。
justify – 每个行框的边缘应与块级元素内容区域的边缘对齐。
字符串 – 列中单元格的内容将在给定字符串上对齐。
示例
现在让我们使用 text-align 属性将 div 中的文本水平居中 –
Align Horizontally .demo { background-color: orange; border: 3px solid yellow; text-align: center; }Software Quality Management
Software Quality Management ensures the required level of software quality is achieved.
This text in div is centered horizontally.
使用 justify-content 属性在 Div 中水平居中文本
示例
要将 div 中的文本水平居中，请使用 justify-content 属性。现在让我们看一个例子
Align Horizontally .demo { background-color: orange; border: 3px solid yellow; display: flex; justify-content: center; }Software Quality Management
Software Quality Management ensures the required level of software quality is achieved.
This text in div is centered horizontally.
使用 padding 属性在 Div 中垂直居中文本
要将 div 中的文本垂直居中，请使用 padding 属性。 padding 属性允许您指定元素的内容与其边框之间应出现多少空间。以下 CSS 属性可用于控制列表。您还可以使用以下属性为框每一侧的填充设置不同的值 –
padding-bottom 指定元素的底部填充。padding-top 指定元素的顶部填充。padding-left 指定元素的左内边距。padding-right 指定元素的右内边距。padding 用作前述属性的简写。
示例
现在让我们看一个使用 padding 属性在 div 中垂直居中文本的示例 –
Align Vertically .demo { background-color: orange; border: 3px solid yellow; padding: 50px 0; }Software Quality Management
Software Quality Management ensures the required level of software quality is achieved.
This text in div is centered vertically.
使用 line-height 属性在 Div 中垂直居中文本
要将 div 中的文本垂直居中，请使用 line-height 属性。 line-height 属性修改组成一行文本的行内框的高度。
以下是可能的值 –
正常 – 指示浏览器将元素中的行高设置为“合理”距离。
number – 元素中行的实际高度是该值乘以元素的字体大小。
length – 元素中行的高度是给定的值。
百分比 – 元素中行的高度按元素字体大小的百分比计算。
示例
现在让我们看一个使用 line-height 属性在 div 中垂直居中文本的示例 –
Align Vertically .demo { background-color: orange; border: 3px solid yellow; line-height: 150px; height: 200px; }Software Quality Management
Software Quality Management is a process that ensures the required level of software quality is achieved.
This text in div is centered vertically.
以上就是如何将文本（水平和垂直）居中在一个div块内？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551779.html
微信扫一扫 
支付宝扫一扫 
