如何在Kramdown Markdown中水平居中HTML两列元素？

嘿，针对你想把两列内容水平居中在页面中间，同时不用column-count属性的需求，我给你一个用Flexbox实现的方案——它比原来的多列布局更灵活，还能轻松搞定居中效果。

修改后的代码实现 #

<div style="display: flex; justify-content: center; gap: 20px; max-width: 1000px; margin: 0 auto;">
  <div style="width: 45%;">
    <h2 style="text-align:center">Good</h2>
    <pre><code class="language-c">int foo (void) { int i; }</code></pre>
  </div>
  <div style="width: 45%;">
    <h2 style="text-align:center">Bad</h2>
    <pre><code class="language-c">int foo (void) { int i; } <span style="background-color:cyan">test</span></code></pre>
  </div>
</div>

关键改动说明： #

• 外层容器改用display: flex创建弹性布局，彻底替代column-count相关属性
• justify-content: center：让内部的两个列模块在容器内水平居中
• margin: 0 auto + max-width：让整个Flex容器本身在页面中水平居中，避免内容过宽时撑满屏幕
• gap: 20px：给两列之间添加固定间距，比原来的column-rule更易调整
• 为每个列容器设置width: 45%：确保两列能稳定并排，同时预留间距空间

这个方案不仅满足了水平居中的需求，还让布局的可控性更强，后续调整列宽、间距都更顺手。

内容的提问来源于stack exchange，提问作者Geoff Huang