更改宽度时CSS不居中[重复]答案

【问题标题】：CSS not centering when changing width [duplicate]更改宽度时CSS不居中[重复]
【发布时间】：2021-05-17 01:37:02
【问题描述】：

我有以下代码。它只是使python脚本格式化，颜色使用highlight.js。

hljs.highlightAll();

 function clicked(){
      if(document.getElementById("code").style.display === "block"){
          document.getElementById("code").style.display = "none" 

      }else{
          document.getElementById("code").style.display = "block" 
      }
  }

html{
    text-align: center;
}

#code{
    display: none;
    text-align: left;
    width: 150px; /* removing this line will center */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/atom-one-dark.min.css"
    />
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/highlight.min.js"></script>


</head>
<body>
    <button onclick="clicked()">Show Code</button>
    <pre id="code"><code>print('hello world')</code></pre>
</body>
</html>

点击按钮后，代码不会居中。但是，如果您取消注释更改 CSS 文件中宽度的行，它将居中。为什么我更改宽度时它不居中？

【问题讨论】：

因为文本只会在给定的框中居中。如果您声明一个固定宽度而不是默认自动。那么 etxt 的包装元素将从左侧开始具有固定宽度，而不是跨越整个宽度

标签： javascript html css highlight.js

【解决方案1】：

您可以添加margin: 0 auto; 以使 div 居中

#code{
    display: none;
    text-align: left;
    margin: 0 auto;
    width: 150px;
}

hljs.highlightAll();

 function clicked(){
      if(document.getElementById("code").style.display === "block"){
          document.getElementById("code").style.display = "none" 

      }else{
          document.getElementById("code").style.display = "block" 
      }
  }

html{
    text-align: center;
}

#code{
    display: none;
    text-align: left;
    margin: 0 auto;
    width: 150px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/atom-one-dark.min.css"
    />
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/highlight.min.js"></script>


</head>
<body>
    <button onclick="clicked()">Show Code</button>
    <pre id="code"><code>print('hello world')</code></pre>
</body>
</html>

【讨论】：

【解决方案2】：

text-align 在内容居中时并不是最好的选择。最好在容器上使用flex 布局（例如body）。

hljs.highlightAll();

 function clicked(){
      if(document.getElementById("code").style.display === "block"){
          document.getElementById("code").style.display = "none" 

      }else{
          document.getElementById("code").style.display = "block" 
      }
  }

body {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#code{
    display: none;
    text-align: left;
    width: 150px; /* removing this line will center */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/atom-one-dark.min.css"
    />
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/highlight.min.js"></script>


</head>
<body>
    <button onclick="clicked()">Show Code</button>
    <pre id="code"><code>print('hello world')</code></pre>
</body>
</html>

【讨论】：