中心对齐元素中的文本,其显示属性值为内联(仅)

时间:2015-01-26 17:09:25

标签: css

尝试将我所拥有的文字集中在一个只有内联显示 属性值的元素中,但无济于事。

如果文本在中间对齐,下面将是我想要的完美示例。

#inliner {
    background-color: green;
    padding: 10px;
    display: inline;
    font-size: 24px;
    line-height: 50px;
    text-align: center!important;
}
<div id="inliner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores!    
</div><!-- End Inliner -->

我尝试添加内部DIV来帮助我实现这一目标。远离预期的结果,因为绿色背景消失,只能看到底部区域。

#inliner {
    background-color: green;
    padding: 10px;
    display: inline;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
}

#inliner-in {
    width: 100%;
    height: 100%;
    display: inline-block;

}
<div id="inliner">
    <div id="inliner-in">
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores! 
        </div><!-- End Inliner -->
</div><!-- End Inliner -->

2 个答案:

答案 0 :(得分:1)

添加背景颜色并显示:内联到子DIV。

#inliner {
    padding: 10px;
    font-size: 24px;
    text-align: center;
}

#inliner-in {
    background-color: green;
    width: 100%;
    height: 100%;
    display: inline;
    line-height: 50px;
}

答案 1 :(得分:0)

检查您的控制台是否正确应用了您的css,因为我认为您拥有的内容应该可以正常工作但是如果没有......

您可以尝试将整个div对齐:

#inliner {
    margin-left: auto;
    margin-right: auto;

}