HTML中code标签实现代码区域居中技巧-html教程-PHP中文网

加text-align:center无效因code是行内元素，需父容器设该样式或改display:block+margin:0 auto；多行代码须用pre包裹并设宽度，flex居中更简洁但需防全局样式干扰。

html中code标签实现代码区域居中技巧

直接对`加text-align: center无效`

因为默认是行内元素，<code>text-align: center只作用于它的父容器，且只影响其内部文本的对齐（比如多行代码里的文字左对齐/右对齐），不会让整个块水平居中。更关键的是：如果<code>被嵌在<p>里但</p> <p>没设<code>text-align: center，那它就完全不生效。

常见错误现象：console.log("hello")在段落里靠左，你给它加style="text-align:center"，结果毫无反应——因为本身不是块级，<code>margin: 0 auto也无效。

必须确保父容器是块级，并显式设置了text-align: center
若被其他样式干扰（如<code>display: inline-block或float），也会失效
单行短代码（如命令）可临时转为块级：display: block; margin: 0 auto;

<code>嵌套结构下如何真正居中</code>

多行代码必须用<pre class="brush:php;toolbar:false;"></pre>包裹<code>，否则缩进、换行全丢失。但<pre class="brush:php;toolbar:false;"></pre>默认宽度由内容撑开，margin: 0 auto不触发——它需要明确宽度。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

正确做法是用外层<div>控制宽度和居中，再重置<code><pre class="brush:php;toolbar:false;"></pre>的默认边距：

<div style="width: 90%; max-width: 760px; margin: 1em auto;">
  <pre class="brush:php;toolbar:false;" style="margin: 0; background: #f8f8f8; padding: 1rem; overflow-x: auto;">
    <code>function foo() {
  return "bar";
}</code>

Flex布局居中但保留原始格式

当

<pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;需要和其他元素（如标题、说明文字）一起弹性布局时，Flex最干净。但要注意：&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;</pre>

必须是Flex项目，不能是子元素再套子元素后失焦。

推荐写法：父容器设display: flex; justify-content: center;，<pre class="brush:php;toolbar:false;"></pre>设align-self: center;（垂直方向可选）：

<div style="display: flex; justify-content: center; padding: 1em;"> <pre class="brush:php;toolbar:false;" style="margin: 0; background: #2d2d2d; color: #f8f8f2; padding: 1rem;"> <code>git status -s</code>