如何在 Kramdown Markdown 中水平居中 HTML 元素？答案

【问题标题】：How to center HTML element horizontally in Kramdown Markdown?如何在 Kramdown Markdown 中水平居中 HTML 元素？
【发布时间】：2019-11-09 11:32:48
【问题描述】：

我的 Markdown 文件 (kramdown) 中有一个 HTML 元素，它基本上只有两列。这是一个示例：https://codepen.io/KidPiano/pen/NWWzLjE。

<div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;">

<div style="display:inline-block">
<h2 style="text-align:center">Good</h2>
<pre><code class="language-c">int foo (void)    
{
    int i;
}
</code></pre>
</div>

<div style="display:inline-block">
<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>

有没有办法让这些列在页面中间水平居中？

编辑：在下面回答 - 不要使用列数

【问题讨论】：

标签： html css markdown kramdown

【解决方案1】：

试试这个

<div style="text-align:center;">

  <div style="display:inline-block;text-align:left;">
    <h2 style="text-align:center">Good</h2>
    <pre>
        <code class="language-c">
          int foo (void)    
          {
          int i;
          }
        </code>
    </pre>
  </div>

  <div style="display:inline-block;text-align:left;">
    <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>

【讨论】：

列现在居中，但未水平对齐。我看看能不能多玩一点。
没关系，我想通了，谢谢。我不知道为什么我使用 column-count。