文字居中和左对齐自动布局实例页面

展示

去论坛 »

display:table方法，IE8+

谢谢大家。

谢谢大家购买我的书籍，如果你觉得内容还不错，欢迎推荐给同事或朋友。

fit-content方法，现代浏览器

谢谢大家。

谢谢大家购买我的书籍，如果你觉得内容还不错，欢迎推荐给同事或朋友。

代码

HTML：

<h4>display:table方法，IE8+</h4>
<div class="cw-box">
    <div class="cw-content-1">谢谢大家。</div>
</div>
<div class="cw-box">
    <div class="cw-content-1">谢谢大家购买我的书籍，如果你...</div>
</div>
<h4>fit-content方法，现代浏览器</h4>
<div class="cw-box">
    <div class="cw-content-2">谢谢大家。</div>
</div>
<div class="cw-box">
    <div class="cw-content-2">谢谢大家购买我的书籍，如果你...</div>
</div>

CSS：

.cw-box {
    padding: 1em;
    background-color: deepskyblue;
    color: #fff;
}
.cw-content-1 {
    display: table;
    margin: auto;
}
.cw-content-2 {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}