Question

If I wanted to print code on an HTML page, but I want the <pre> block to be centered, but the actual text to be left aligned, how is this done?

Just to make it simple, what would it take to get this to center so that both lines start at the same place.?

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