Question

好的，我正在开发一个自定义解析器，用于克里奥尔语标记语言的个人变体，我在使用我添加的宏时遇到问题，该宏将文本居中。

给出以下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

无法将文本置于中心位置

1 个答案: