I have an HTML element in my markdown file (kramdown), which is basically just two columns. Here is an example: 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>
Is there any way to horizontally center these columns in the middle of the page?
Edit: answered below - don't use column count
Try this
<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>