固定元素中的居中文本 CSS

Question

我有这个代码：

body {
    margin: 0;
}
.menu {
    background: black;
    height: 100vh;
    width: 240px;
    position: fixed;
    top: 0;
    color: white;
    z-index: 2;
    }
    
main {
      padding-left: 240px;
      text-align: center;
      }
      
main .footer {
   position: fixed;
   background-color: gray;
   bottom: 0;
   width: 100%;
   color: white;
   text-align: center; /* doesn't work? */
   }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menu">Menu</div>
<main>
<h1>Example</h1>
<p>TEXT.</p>
<p>TEXT.</p>

<div class="footer">
  <p>Fixed footer with cented text.</p>
</div>

</main>
</body>
</html>

我不知道这怎么可能，但我无法将该文本置于页脚中心：/ 加上 text-align: center 也没关系；到 .footer 或 .footer p。有任何想法吗？谢谢

Answer 1

解法：

    body {
        margin: 0;
    }
    .menu {
        background: black;
        height: 100vh;
        width: 240px;
        position: fixed;
        top: 0;
        color: white;
        z-index: 2;
        }
        
    main {
          padding-left: 240px;
          text-align: center;
          }
          
    main .footer {
       position: fixed;
       background-color: gray;
       bottom: 0;
     /* del width: 100%; */
       color: white;
       text-align: center;
     /*  add this */
       left:240px;
       right:0;
       }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menu">Menu</div>
<main>
<h1>Example</h1>
<p>TEXT.</p>
<p>TEXT.</p>

<div class="footer">
  <p>Fixed footer with cented text.</p>
</div>

</main>
</body>
</html>

感谢@Temani Afif

固定元素中的居中文本 CSS

Center text in fixed element CSS

html

css

text-align

center