div中的文字怎么居中
时间: 2024-05-16 17:19:29 浏览: 89
在div中居中文字可以使用以下几种方法:
1. 使用line-height属性,将div的高度与line-height的值设置相等,并将text-align属性设置为center,这样可以实现文字在div中水平垂直居中。例如:
```
.container {
line-height: 100px; /* 修改此处的值为div的高度 */
text-align: center;
}
```
2. 使用flex布局,将div的display属性设置为flex,并设置flex-direction为row,align-items为center,justify-content为center,这样可以实现水平垂直居中。例如:
```
<div style="height: 28px; display: flex; flex-direction: row; align-items: center; justify-content: center; background: #b2b2c5; border-radius: 2px">
居中文字
</div>
```
3. 如果只需要水平居中,可以将div的display属性设置为flex,并设置flex-direction为row,justify-content为center,这样可以实现文字在div中水平居中。例如:
```
<div style="height: 28px; display: flex; flex-direction: row; justify-content: center;">
左右居中文字
</div>
```
<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [5种div 内容水平垂直居中方法](https://blog.csdn.net/linxilinyu/article/details/130865529)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [div文字居中方法](https://blog.csdn.net/wangyuntuan/article/details/128520982)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文