中心<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;
 }