css巧妙利用行高(line-height)设置元素(内容)对齐方式

这里讲述css巧妙利用行高(line-height)设置元素(内容)对齐方式。

我们有时候需要像表格一样设置内容的对齐方式，巧妙的利用行高(line-height)属性，利用div、span元素也可以设置出理想的内容对齐方式。

如下在多个参数排列时，当行高(line-height)都设置为28px时，能达到如下的效果：

.outattributes{

    width:100%;

    height:auto;

    line-height:28px;

    font-size:12px;

    margin:5px 0px;

    color:#555;

}

.outattributes .outattri{

    width:239px;

    height:28px;

    line-height:28px;

    display:block;

    float:left;

    border:1px solid red;

}

.outattributes span:first-child{

    float:left;

    width:36%;

    line-height:28px;

    text-align:right;

    display:inline-block;

    border:1px solid blue;

}

.outattributes span:last-child{

    width:62%;

    text-align:left;

    line-height:28px;

    display:inline-block;

    border:1px solid yellow;

}|#|#|

<div id="productPara" class="outattributes" style="width:1000px;">

            <div class='outattri'><span>参数1：</span><span>参数1参数1参数1参数1参数1</span></div>

            <div class='outattri'><span>参数2：</span><span>参数2</span></div>

            <div class='outattri'><span>参数3：</span><span>参数3</span></div>

            <div class='outattri'><span>参数4：</span><span>参数4</span></div>

            <div class='outattri'><span>参数5：</span><span>参数5</span></div>

            <div class='outattri'><span>参数6：</span><span>参数6</span></div>

        </div>

这种情况下，当容器内容不超出容器时，看起来很美观，没有问题；但当参数内容超出容器时就会换行，出现如下效果：

（参数1换行复叠到下面的内容去了）

为了使1参数内容仍然在容器内，可以设置span2的行高line-height为14px；以下只显示改变的部分：

.outattributes span:last-child{ line-height:14px; }

这时的效果：

此时，参数1的内容在容器内了，但参数名和参数内容的对齐方式发生了变化，参数内容呈顶端对齐方式，此时再设置span1的行高line-height为14px：

.outattributes span:first-child{ line-height:14px; }

外层容器的行高line-height也设为14px：

.outattributes .outattri{ line-height:14px; }

参数名和参数内容就呈现顶端对齐方式了，效果如下：

此时的效果就比较美观，至于我们需要什么样的对齐方式，可以根据情况确定。

欢迎阅读、分享，转载和使用请注明出处，文章来自三里河之光-风、物、情

也可承接私活网站建设、小程序，项目实优，联系qq：38623483。项目交流群：315939322。