文章/答案/技术大牛

发布

问更改宽度时CSS不对中
EN

Stack Overflow用户

提问于 2021-05-16 17:30:15

回答 2查看 561关注 0票数 1

我有下面的代码。它简单地使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文件中宽度的行，它就会居中。为什么当我改变宽度的时候它不中心？

javascript

html

css

highlight.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-16 17:37:02

当以内容为中心时，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>

票数 0

Stack Overflow用户

发布于 2021-05-16 17:33:22

您可以将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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67559667

复制

相似问题

问更改宽度时CSS不对中
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改宽度时CSS不对中EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改宽度时CSS不对中
EN