css佈局實現單行文字水平居中，多行文字靠左
阿新 • • 發佈：2019-01-11
單行文字居中，多行文字靠左，需要css佈局來實現，那麼就需要用到兩層元素，外面一層設定text-align:center;裡面一層為行元素，需要設定text-align:left;這樣有一行的時候因為裡面是行內元素，有多少內容就多寬，而外面一層設定了text-align:center;所以會實現居中，當文字為多行的時候，由於本身設定了text-align:left，所以又會靠左顯示。具體實現如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>標題</title> <meta name="keywords" content=""> <meta name="description" content=""> <style> div{ text-align:center; } p,span{ display:inline-block; text-align:left; } </style> </head> <body> <div> <p> 單行居中多行靠左 </p> <p> 單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左 </p> <span>單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左單行居中多行靠左</span> </div> </body> </html>
這裡需要注意的是：text-align：center的用法，在span中設定text-align:center是沒有作用的，因為text-align的作用就是：可以為文字和內聯元素、行內塊設定水平居中，即使該文字是在塊元素內。
所以span標籤是需要設定display:inline-block,這樣是行內塊，當文字很短的時候不是獨佔一行的，所以父元素設定text-align:center的時候可以實現居中，當文字很多的時候，假如多行文字並且有半行存在的時候，因為是行內塊，所以text-align:left起到了作用就多行文字靠左顯示了。