css
.outer{
width: 50%;
margin: 0 auto;
text-align: center;
}
.inner{
display: inline-block;
text-align: left;
}
p{
text-align: center;
}
html
<div class="outer">
<span class="inner" id="con">文字</span>
</div>
<p><button id="btn">增加文字</button></p>
js
var btn = document.getElementById('btn');
var con = document.getElementById('con');
btn.onclick = function () {
con.innerHTML += "-新增文字";
}
当span的宽度小于div时会在div中居中显示 而在span的宽度等于div时 其中的文字受到.inner 的影响左对齐显示