center - 无法将文本居中

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>

block 中的标题和文本都呈现为居中，但最后一行根本不居中，即使它在跨度内。我曾尝试将跨度更改为另一个 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