固定元素 CSS 中的文本居中答案

【问题标题】：Center text in fixed element CSS固定元素 CSS 中的文本居中
【发布时间】：2021-03-14 19:40:36
【问题描述】：

我有这个代码：

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。有任何想法吗？谢谢。

【问题讨论】：

left:0 到页脚？
@TemaniAfif 我无法添加它，因为我有那个菜单。
所以左：200px 和右：0 ？（删除宽度）
你试过我的代码了吗？它会给你你想要的结果
好的，谢谢。我添加了 left:240px 和 right:0 ，现在可以了。再次感谢。

标签： html css center text-align

【解决方案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

【讨论】：