CSS 文字居中
文字居中分為兩種形式,水平居中和垂直居中,下面通過程式碼例項分別做一下介紹。
一.水平居中:
通過將text-align屬性值設定為center即可。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant{ width: 150px; height: 80px; color: blue; text-align: center; background-color:bisque; } </style> </head> <body> <div class="ant">螞蟻部落</div> </body> </html>
上面的程式碼實現文字在div中效果,如果要左或右對齊,只要將屬性值設定為left或者right即可。
二.垂直居中:
只要將line-height和height屬性值設定為相同即可。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .ant{ width: 150px; height: 80px; line-height: 80px; color: blue; text-align: center; background-color:bisque; } </style> </head> <body> <div class="ant">螞蟻部落</div> </body> </html>
相關文章
- CSS 多行文字居中CSS
- CSS 文字li元素中垂直居中CSS
- CSS多行文字垂直居中效果CSS
- CSS文字水平居中對齊CSS
- css垂直居中怎麼設定?文字上下居中和圖片垂直居中CSS
- css實現文字和圖片居中效果CSS
- CSS元素(文字、圖片)水平垂直居中方法CSS
- css input文字框中的內容居中效果CSS
- CSS多行文字垂直居中例項程式碼CSS
- css多行文字垂直居中程式碼例項CSS
- css如何實現div中的文字垂直居中效果CSS
- CSS居中CSS
- css文字在元素中垂直居中程式碼例項CSS
- CSS垂直居中和水平居中CSS
- CSS水平居中和垂直居中CSS
- 如何實現CSS居中?–CSS居中常用方法CSS
- css如何實現多行文字在div中垂直居中效果CSS
- css如何設定文字在li元素中垂直居中顯示CSS
- css如何實現文字在li元素中上下垂直居中CSS
- CSS div居中CSS
- CSS之居中CSS
- CSS 垂直居中CSS
- css居中,vueCSSVue
- css實現的多行文字垂直居中效果程式碼例項CSS
- css實現的多行文字垂直居中程式碼例項CSS
- CSS水平居中和垂直居中的方法CSS
- web前端技巧-文字如何垂直居中?多行文字如何實現上下居中?Web前端
- css--實現一個文字少時居中,文字換行時居左的樣式CSS
- css-居中篇CSS
- CSS div居中效果CSS
- css實現居中CSS
- css水平垂直居中CSS
- css居中套路CSS
- CSS垂直水平居中CSS
- css居中總結CSS
- 如何讓文字垂直居中對齊文字框
- div垂直居中-CSS元素垂直居中方法CSS
- CSS的垂直居中和水平居中總結CSS