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

Question

为什么屏幕较宽时中间单元格不居中？

我已经尝试将其中的几乎所有内容都居中，但仍然看不到我需要的结果。

Answer 1

table 单元格宽度随文本大小而变化。您必须将宽度设置为 table 个单元格

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

Answer 2

你可以给任何人 with:33.33

Answer 3

table 及其单元格均居中。看来您正在尝试将中间单元格与上面的徽标对齐，我建议您手动将徽标向左移动，使用 margin:-10px，如果这是您想要的。

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

Answer 4

使用 grid-based 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。如您所见，在超小屏幕分辨率下，块堆叠。您将无法堆叠 table 个单元格或 headers.

更新：

您的 Header 部分应该是：

<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 table 中的中间单元格未正确居中

The middle cell in CSS table is not centered properly

html

css-tables