0

好的，我正在为 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/

4

1 回答 1

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

于 2013-10-06T04:45:06.970 回答