无法使文字居中

Question

好的，我正在为Creole标记语言的个人变体开发自定义解析器，并且在添加以文本居中的宏时遇到了麻烦。

给出以下CSS代码：

.boxsection {
    text-align:left;
    border:1px solid #333;
    padding:10px;
    margin:10px;
    background:1px solid #ccc;
}

以及解析器输出的以下HTML代码：

<div class='boxsection'>
    <span style='text-align:center'>
        <h4>Center</h4>
        <pre>&lt;&lt;center&gt;&gt;Some text in the middle&lt;&lt;/center&gt;&gt;</pre>
        This macro causes the content inside of it to be centered.
    </span>
</div>

块中的标题和文本都居中，但最后一行根本不在中心，即使它位于范围内也是如此。 我曾尝试将跨度更改为另一个div，并将显示设置为内联，但这没有用。

唯一有效的方法是使用标签，但该标签已弃用，因此我宁愿避免使用可能在将来的浏览器更新中停止工作的解决方案。

编辑：我已经上传了一个小的HTML页面，该页面演示了该问题： http : //www.wuala.com/zauber.paracelsus/Public/centering_test.html/

Answer 1

这是因为您的HTML无效。

您不能将具有默认display:block元素添加到默认为display:inline元素中。

将您的span更改为div 。

HTML

<div class='boxsection'>
  <h4>Center</h4>
  <pre>&lt;&lt;center&gt;&gt;Some text in the middle&lt;&lt;/center&gt;&gt;</pre>
  This macro causes the content inside of it to be centered.
</div>

CSS

.boxsection {
  text-align:center;
  border:1px solid #333;
  padding:10px;
  margin:10px;
  background:1px solid #ccc;
}

http://codepen.io/Chovanec/pen/Hyxqe