CSS not centering when changing width

Question

I have the following code. It simply makes the python script formatted, with the colors using 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>

After clicking the button, it will not center the code. But if you uncomment the line which changes the width in the CSS file, it centers. Why does it not center when I change the width?

because the text will only cenetr within the given box. If you declare a fixed width instead of default auto. then the wrapping element of the etxt will have a fixed width starting from the left instead of spanning the entire width — tacoshy, May 16 '21 at 17:34

score 1 · Answer 1 · answered May 16 '21 at 17:33

You can add margin: 0 auto; to center the div like

#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>

score 0 · Accepted Answer · answered May 16 '21 at 17:37

text-align is not the best thing to reach for when centering content. You'd be better off using flex layout on the container (e.g. 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>

CSS not centering when changing width

2 Answers2