Question

为什么屏幕宽时中间单元格没有居中？

我尝试将所有内容居中，但仍然看不到我需要的结果。

Answer 1

您可以给任何人：33.33

Answer 2

表格单元格随文本大小变化的宽度。您必须为表格单元格设置相同的宽度

th {
    font-weight: normal;
    width: 33.33%;
}

Answer 3

表格及其单元格都居中。看来您正在尝试将中间单元格与上面的徽标对齐，如果您要这样做，我建议您使用margin：-10px手动将徽标移到左侧。

作为尝试缩小浏览器窗口的测试，您会看到中间单元格在某个点对齐并且对齐松散。

Answer 4

使用基于网格的CSS框架，例如Bootstrap 4：

<div class="container-fluid grid">
  <div class="row">
    <div class="col-sm-4 column">
      <a href="http://edm-norway.com/4d/logos">our services</a>
    </div>
    <div class="col-sm-4 column">
      <a href="http://mechanisms.club">our project</a></div>
    <div class="col-sm-4 column">
      <a href="http://ecofarm.technology">our startup</a>
    </div>
  </div>
</div>

<div class="footer">a picture is worth a thousand words
</div>

查看得到 here 的结果。如您所见，在超小屏幕分辨率下，块堆栈。您将无法堆叠表格单元格或标题。

更新：

您的标题部分应为：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <style>
    body {
      background: #333333ff;
      font-family: 'Poiret One', cursive;
      font-size: 25px;
    }

    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 240px;
      height: auto;
    }

    .footer {
      position: fixed;
      left: 0;
      bottom: 0px;
      width: 100%;
      text-align: center;
      color: #f2f2f2ff;
      font-size: 20px;
      background-color: #4a4a4aff;
      padding: 10px;
    }

    a,
    a:hover {
      color: #f2f2f2ff;
      text-decoration: none;
    }

    .grid .column {
      font-weight: normal;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    @media (min-width: 576px) {
      .grid .column {
        height: 100px;
      }
    }

  </style>
</head>

CSS表中的中间单元格未正确居中

4 个答案: