关于line-height 如何使单行文字、多行文字都能居中
下面先上代码
//CSS样式
.out {
width: 600px;
height: 600px;
border: 1px dotted silver;
margin: 100px auto;
}
p {
border: 1px dashed #058;
}
p:nth-child(1) {
height: 100px;
line-height: 100px;
}
p:nth-child(2) {
height: 100px;
line-height: 100px;
/*如果我这里直接用line-height，会造成每一行都有100px的行高(多行文字嘛)*/
}
p:nth-child(2) span {
/*height: 100px;*/这里是不用设置，直接继承就好了
font-size: 14px;/*通过设置这个14px，可以看出谷歌浏览器默认字体16px*/
display: inline-block;/*这里把span设置成 行内块*/
line-height: 1.6em;/*取1.4em 也行 这里的em是基于 font-size的*/
/*1.4em 就相当于 1.4倍的font-size */
}
//html代码
<div class="out">
<p>我这里只有单行文字</p>
<p><span>我这里是多行文字我这里是多行文字我这里是多行文字我这里是多行文字我这里是多行文字我这里是多行文字我这里是多行文字我这里是多行文字我这里是多行文字我这里是多行文字</span></p>
</div>
就简单的说道这里!
如果大家有更好的方法，也请联系我!!!!O(∩_∩)O哈哈~
