纯CSS实现文字一行居中，多行左对齐的方法
生活随笔
收集整理的這篇文章主要介紹了
纯CSS实现文字一行居中，多行左对齐的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
其實這種需求還是蠻常見的，主要用于產品列表頁面，用于產品圖片下面，顯示產品的名稱。
想要實現的效果為：
未知文字長度，當文字長度小于盒子寬度，也就是一行時，文字居中。
當文字長度大于盒子的寬度，會自動換行，成為多行文字，此時文字左對齊。
1、利用行內元素：
我首先想到了這個思路，思路如下：
讓P居中，P中的文字左對齊：（P的父級text-align:center; P自身text-align:left;）
P的寬度根據文字的寬度伸縮，當文字為一行時，則P的寬度小于LI的寬度，居中；則看上去文字是局中的。
當大于一行時，P的寬度和LI的寬度是一致的，文字就居左了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字測試</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:16px;font-family:tahoma,Helvetica, Arial,"5FAE8F6F96C59ED1";line-height: 1.5;}
ul { 500px; margin: 100px auto; overflow: hidden;}
/*代碼開始*/
li {
/* 這些都不重要 */
float: left; 150px;background: #fafafa;height: 50px;margin-right: 10px;
/* 重點 */
text-align: center;
}
/* 重點 */ display: inline-block使P的寬度根據文字的寬度伸縮
p {
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<ul>
<li><p>一行文字</p></li>
<li><p>這里是比較長的兩行文字</p></li>
</ul>
</body>
</html>
效果：
2、利用萬能的表格
HTML代碼和解決方法一是一致的。主要是利用了table的牛逼特性：未知寬度的table 也是可以左右對齊的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字測試</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:16px;font-family:tahoma,Helvetica, Arial,"5FAE8F6F96C59ED1";line-height: 1.5;}
ul { 500px; margin: 100px auto; overflow: hidden;}
/*代碼開始*/
li {
/* 這些都不重要 */
float: left; 150px;background: #fafafa;height: 50px;margin-right: 10px;
}
/* 重點 */
p {
display: table;
margin: 0 auto;
}
</style>
</head>
<body>
<ul>
<li><p>一行文字</p></li>
<li><p>這里是比較長的兩行文字</p></li>
</ul>
</body>
</html>
總結
以上是生活随笔為你收集整理的纯CSS实现文字一行居中，多行左对齐的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nanopi2基本使用
- 下一篇： android五大布局居中对齐方式