求助：无法使transition代码居中，text-align属性失效问题排查

问题根源 #

1. code的text-align:center无效
   code默认是行内（inline）元素，而text-align是块级元素的属性，仅能控制其内部行内内容的对齐，直接给行内元素设置该属性不会生效。

2. pre的text-align:left看起来失效
   pre是预格式化元素，会完全保留HTML中的空白字符（包括缩进空格、换行）。你的HTML里pre内部的code标签有额外缩进，这些空白被原样渲染，导致内容看起来不是左对齐，属于视觉错觉，并非text-align属性失效。

修复方案 #

1. 实现代码文本居中 #

修改code的CSS，将其转为块级元素，这样text-align:center就能生效：

code {
    display: block;
    text-align: center;
}

2. 让pre的左对齐正常显示 #

清理HTML中pre内部的多余缩进，因为pre会保留所有空白字符。调整后的HTML结构如下：

<aside class="property-detail">
    <small>
       When we use shorthand version of transition, we use like this: 
       Property name | Duration
       <pre>
<code>
<span class="code">transition: margin-left 5s;</span>
</code>
       </pre>
   </small>
 </aside>

完整示例代码 #

HTML

<aside class="property-detail">
    <small>
       When we use shorthand version of transition, we use like this: 
       Property name | Duration
       <pre>
<code>
<span class="code">transition: margin-left 5s;</span>
</code>
       </pre>
   </small>
 </aside>

CSS

.property-detail {
    background-color: #14213d;
    border-radius: 20px;
    padding: 20px;
    margin: 20px;
}
pre {
    background-color: #000000;
    width: 60%;
    border-radius: 20px;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
}

code {
    display: block;
    text-align: center;
    color: #ffffff; /* 可选：让代码在黑色背景上更清晰 */
}

内容的提问来源于stack exchange，提问作者Pippal B.