内容少时居中 内容多是左对齐

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 的影响左对齐显示