CSS 错误：为什么页眉水平对齐和页脚对齐空间不均匀？答案

【问题标题】：CSS error: why isn't the header horizontally aligning and footer justified to space evenly?CSS 错误：为什么页眉水平对齐和页脚对齐空间不均匀？
【发布时间】：2019-08-06 05:40:33
【问题描述】：

我是一名编码新手 - 使用 CSS flex box 创建一个模拟响应式布局，但我无法在最宽的视口中水平对齐页眉元素，以及将页脚均匀地弯曲到空间。

对于标题，我尝试了display:inline 和text-align:center，但没有成功。对于页脚，我尝试了display:flex 和justify-content: space-evenly 也没有成功。

<html>
 <body>
  <header>
    <div class="logo">
       <h1>actual image logo here</h1>
       <h1>The ABC Company</h1>
    </div>
    </header>
  <footer>
    <ul class="social">
      <li class="social_icon">Twitter Logo here</li>
      <li class="social_icon">Facebook logo here</i></li>
      <li class="social_icon">Insta logo here</li>
    </ul>
  </footer>
 </body>
</html>

【问题讨论】：

显示代码，看不到问题很难说是哪里出了问题可以用codepen或者jsFiddle，或者这里加代码sn-p，我们可以帮你

标签： html css alignment

【解决方案1】：

header {
  display: flex;
  justify-content: center;
  text-align: center;
}

.social {
  display: flex;
  justify-content: space-evenly;
  list-style: none;
}

如果你愿意使用 flexbox，你必须在 header 上添加display: flex。然后使用justify-content: center 将其水平居中。在页脚中，您必须将 display: flex 实际添加到您的中，因为它是您想要均匀定位的孩子。

Here's working example

【讨论】：

【解决方案2】：

试试这样的：

header {
    text-align: center;
}

.logo {
    display: inline-block;
}

.social {
    display: flex;
    justify-content: space-evenly;
}

【讨论】：

【解决方案3】：

如果您的页眉和页脚占屏幕宽度的 100%，那么请执行以下操作：

header,footer {
    width:100%
}

然后让任何元素居中对齐，这里最简单的方法是使用弹性框，就像你想的那样

header {
     background: #aaf;
     display: flex;
     justify-content: center;
   }

footer {
     background: #aff;
     display: flex;
     justify-content: center;
    }

header div.logo {
       display: flex;
       justify-content: center;
    }

footer ul.social {
      width : 100%;
      list-style: none;
      display: flex;
      justify-content: space-evenly;
    }

由于 Header 和 Footer 都有一个子项（一个 div 代表页眉，一个 ul 代表页脚），您需要再次使用 flex 将这些子项（h1 和 li）的内容居中。
为了让space-evenly 在ul 上工作，我必须增加它的默认宽度，否则它似乎是fit content 并看起来居中。
如果您还有任何问题，请随时发表评论。

body {
  background: rgb(36, 36, 33);
  margin: 0;
  padding: 0;
  height: 100vh;
}

   header,
   footer {
     width: 100%
   }

   header {
     background: #aaf;
     display: flex;
     justify-content: center;
   }

    footer {
     background: #aff;
     display: flex;
     justify-content: center;
    }

    header div.logo {
       display: flex;
       justify-content: center;
    }

     header div.logo > *{
       padding: 0 10px;
     }

    footer ul.social {
      width : 100%;
      list-style: none;
      display: flex;
      justify-content: space-evenly;
    }

<!Doctype HTML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="style.css">
    <title></title>
</head>

<body>
  <header>
      <div class="logo">
          <h1>actual image logo here</h1>
          <h1>The ABC Company</h1>
      </div>
  </header>
  <footer>
      <ul class="social">
          <li class="social_icon">Twitter Logo here</li>
          <li class="social_icon">Facebook logo here</i></li>
          <li class="social_icon">Insta logo here</li>
      </ul>
  </footer>
</body>

</html>

【讨论】：

坚持使用h1 标签的唯一原因是为了 SEO，但在 HTML5 世界中，搜索引擎不再关心：seroundtable.com/google-h1-tags-23699.html 尽可能多地使用 h1s很好。
谢谢。你说的对。似乎我被教导了一个常见的误解