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

时间:2018-08-27 10:37:11

标签: html css-tables

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

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

e

以下是链接:http://edm-norway.com/4d

4 个答案:

答案 0 :(得分:1)

您可以给任何人:33.33

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

使用基于网格的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>