CSS——文字對齊方式
阿新 • • 發佈：2018-12-15
橫向對齊
方法1：單行塊級元素水平居中只用新增text-align即可，如P標籤，垂直居中vertical-align只適用於行內元素與單元格，所以設定行高與塊高度相同即可
text-align: center;
方法2：普通的文字居中只要設定text-align即可，但是這個設定了P標籤的寬度，則是在該寬度內進行居中，則應該設定margin進行居中
.content p { width:500px; font-family: "微軟雅黑"; margin: 0 auto; }
縱向對齊
基本方法：
vertical-align: middle;
設定多行文字元素垂直居中的時候將父元素設定成表格，子元素設定成單元格即可使用vertical
可以在vertical-align中輸入正負畫素讓他進行上下偏移
.content
{
display: table-cell;
vertical-align: middle;
}
豎直對齊的多種方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字樣式</title> <style type="text/css"> p{background-color: #ececec; height: 80px;font-size: 20px;} span{color:red;font-size: 14px;} .sub{vertical-align: sub;} .super{vertical-align: super;} img{width: 130px;height:40px;} .baseLine{vertical-align: baseline;} .top{vertical-align: top;} .textTop{vertical-align: text-top;} .middle{vertical-align: middle;} .textBottom{vertical-align: text-bottom;} .bottom{vertical-align: bottom;} td{height:80px; width:100px;} </style> </head> <body> <b>----sub和super值----</b> <p>CSS層疊樣式表<span class="sub">sub</span></p> <p class="sub">CSS層疊樣式表<span >sub</span></p> <p>CSS層疊樣式表<span class="super">super</span></p> <b>----baseline、top、text-top、middle、bottom、text-bottom值----</b> <p> CSS層疊樣式表 <span>（Cascading Style Sheets）</span> <img src="img/logo.png"/> </p> <p> CSS層疊樣式表 <span class="baseLine">基線baseline</span> <img src="img/logo.png" class="baseLine"/> </p> <p> CSS層疊樣式表 <span class="top">頂端對齊top</span> <img src="img/logo.png"/> </p> <p> CSS層疊樣式表 <span class="textTop">文字的頂端對齊textTop</span> <img src="img/logo.png"/> </p> <p> CSS層疊樣式表 <span class="middle">中部對齊middle</span> <img src="img/logo.png" class="middle"/> </p> <p> CSS層疊樣式表 <span class="textBottom">文字底端對齊textBottom</span> <img src="img/logo.png"/> </p> <p> CSS層疊樣式表 <span class="bottom">底端對齊bottom</span> <img src="img/logo.png" class="bottom"/> </p> <b>----長度和百分比的值----</b> <p> CSS層疊樣式表 <span style="vertical-align:-15px;">長度值</span> <img src="img/logo.png"/> </p> <p style="line-height: 1.5em;"> CSS層疊樣式表 <span style="vertical-align:-100%;">百分比值</span> <img src="img/logo.png"/> </p> <b>----應用於單元格元素----</b> <table border="1px" class="one" cellspacing="0" > <tr> <td class="top"><span>top</span></td> <td class="middle"><span>middle</span></td> <td class="bottom"><span>bottom</span></td> </tr> </table> </body> </html>
展示效果：
