text-align:center 与-webkit-center/-moz-center的区别

by redky

HTML

<h1>例一： text-align:center</h1>
<div class="box1">
    蒹葭苍苍,白露为霜.所谓伊人,在水一方.溯洄从之,道阻且长.溯游从之,宛在水中央.
    <p>蒹葭凄凄,白露未晞.所谓伊人,在水之湄.溯洄从之,道阻且跻.溯游从之,宛在水中坻.</p>
    蒹葭采采,白露未已.所谓伊人,在水之涘.溯洄从之,道阻且右.溯游从之,宛在水中沚.
</div>
<h1>例二： text-align:-webkit-center/-moz-center</h1>
<div class="box2">
    蒹葭苍苍,白露为霜.所谓伊人,在水一方.溯洄从之,道阻且长.溯游从之,宛在水中央.
    <p>蒹葭凄凄,白露未晞.所谓伊人,在水之湄.溯洄从之,道阻且跻.溯游从之,宛在水中坻.</p>
    蒹葭采采,白露未已.所谓伊人,在水之涘.溯洄从之,道阻且右.溯游从之,宛在水中沚.
</div>
<p>注：上例中黄块为 block 元素「p」</p>

CSS

.box1 {
    border: 2px solid #000;
    text-align:center;
    padding:10px;
    margin:1em;
}
.box1 p {
    width: 60%;
    background:gold;
}
.box2 {
    border: 2px solid #000;
    text-align:-webkit-center;
    text-align:-moz-center;
    text-align:-ms-center;
    padding:10px;
    margin:1em;
}
.box2 p {
    width: 60%;
    background:gold;
}