css - 显示属性值为 inline(only) 的元素中的居中对齐文本

Question

尝试将我在元素中的文本居中，该元素的显示 属性值 仅为内联，但无济于事。

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

#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 -->

Answer 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;
}