居中 <pre> 没有居中文本的块

Question

如果我想在 HTML 页面上打印代码，但我希望 <pre> 块居中，但实际文本要左对齐，这是怎么做到的？

为简单起见，如何使它居中以使两条线都从同一位置开始？

<pre>int i = 0;
i = i + 80000000000;</pre>

Answer 1

这就是您想要的方式。有一个容器，周围有 display: block; 和 text-align: center;。然后，将 display: inline-block; 添加到您的 pre 标签并使其成为 text-align: left;

HTML

<div class="container">
    <pre>
int i = 0;
i = i + 80000000000;
    </pre>
</div>

CSS

.container {
   text-align: center;
 }

.container pre {
  display: inline-block;
  text-align: left;
 }

Center <pre> Block Without Centering Text