html⽂字居中左对齐div，纯CSS实现⽂字⼀⾏居中，多⾏左对
齐的⽅法
纯CSS实现⽂字⼀⾏居中，多⾏左对齐的⽅法
其实这种需求还是蛮常见的。主要⽤于产品列表页⾯，⽤于产品图⽚下⾯，显⽰产品的名称。但是其纯CSS实现实在是烧脑，⼀般就放掉这个需求，或者，使⽤JS实现。
但是，我坚信这⼀定能⽤纯CSS来解决！！我为什么如此信念笃定呢？因为我多年前在蓝⾊理想论坛见到过⾼⼿解决过！！！
好吧。我实在是不到这个帖⼦了，万能的百度没能给我解决⽅案。我只能⾃⼰想办法了。
问题描述
如何使⽤css实现⽂字⼀⾏居中，多⾏左对齐？
想要实现的效果为：
未知⽂字长度，当⽂字长度⼩于盒⼦宽度，也就是⼀⾏时，⽂字居中。
当⽂字长度⼤于盒⼦的宽度，会⾃动换⾏，成为多⾏⽂字，此时⽂字左对齐。
好了！该如何实现呢？经过我⾃⼰的研究，到了两种解决⽅法！！
解决⽅法⼀：利⽤⾏内元素
我⾸先想到了这个思路，思路如下：
⽂字测试
⼀⾏⽂字
这⾥是⽐较长的两⾏⽂字
这应该是HTML的结构
让P居中，P中的⽂字左对齐
P的宽度根据⽂字的宽度伸缩
当⽂字为⼀⾏是，则P的宽度⼩于LI的宽度，⼜居中
则，看上去⽂字是局中的
当⼤于⼀⾏时，P的宽度和LI的宽度是⼀致的
⽂字就居左了
所以，CSS是：
/* 傻⼤本粗RESET*/
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:13px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1;}
/* 代码开始 */
ul {width: 500px;margin: 100px auto;overflow: hidden;}
/* 开始了！！！！ */
li {
/
* 这些都不重要 */
float: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px;
/* 重点 */
text-align: center;
}
/* 重点 */
p {display: inline-block;text-align: left;}
好了，这是我想到的，但是我忘记给P加上 text-align: left；让我误认为此路不通。于是，我⼜想到了另⼀个解决⽅法。
然后⾥的朋友根据我的思路，把完整代码写出来了。于是，这条解决⽅案的原创权，就离我⽽去了！！
解决⽅法⼆：利⽤万能的表格
HTML代码和解决⽅法⼀是⼀致的。
CSS如下：
/* 傻⼤本粗RESET*/
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:13px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1;}
/* 代码开始 */
ul {width: 500px;margin: 100px auto;overflow: hidden;}
html怎么让所有内容居中li {loat: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px;}
/* 重点 */
p {display: table;margin: 0 auto}
这个解决⽅法是在我第⼀个解决⽅法因为粗⼼⼤意⽽不得已放弃的情况下，转头到的。主要是利⽤了table的⽜逼特性。未知宽度的table 也是可以左右对齐的！！
是不是暴露年龄了？の~~那个table布局的年代-_-|||
利⽤图层遮盖解决的⽅法
这是⾥的另⼀个朋友给出的解决⽅法，出乎我的意料。因为我们没有沟通，他看到我的题⽬就直接去做去了，给出了完全不同于我的思路的解决⽅法。虽然在结果看来，代码冗余，但是其思路⾮常新颖！
html代码如下
RunJS
短标题
短标题
长标题就是长标题很长的长标题
长标题就是长标题很长的长标题
长标题就是长标题很长的长标题想短也短不了的长标题
长标题就是长标题很长的长标题想短也短不了的长标题
CSS代码如下
body{background:#fff;}
div, p{margin:0; padding:0;}
.holder .center{
float: left;
margin: 10px;
}
.center{
width:140px;
height:60px;
position: relative;
font:normal 14px/20px "Microsoft Yahei";
}
.center .title{
}
.center .shadow{
position: absolute;
text-align: center;
background: #fff;
overflow: hidden;
height: 20px;
top: 0;
left: 0;
width: 100%;
}
总结
当我把这个题⽬发到⾥之后，所有⼈的第⼀反应就是——这绝不可能！！
但是，有⼈⾃⼰就想出来了解决⽅法。⽽我，也到了两条解决⽅法(其中⼀个被⾃⼰PASS掉，另外⼀个朋友写出来了，然后我⼀看，の~~~~)
当然，我能解决，主要还是当年在蓝⾊理想上看到过这个解决⽅法，只是真⼼忘记了。但是通过努⼒回忆，到思路，然后再实现出来。其实是占有先机的。
最后这个朋友，通过完全⾃⼰的思路解决，能够这么快解决，真是了不起！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。