Средняя ячейка в таблице CSS не центрирована должным образом - PullRequest
Новая
       16

Средняя ячейка в таблице CSS не центрирована должным образом

0 голосов
/ 27 августа 2018

Почему средняя ячейка не центрируется, когда экран широкий?

Я пытался сосредоточиться почти на всем, но все еще не вижу результатов, которые мне нужны.

e

Вот ссылка: http://edm -norway.com / 4d

Ответы [ 4 ]

0 голосов
/ 27 августа 2018

Используйте основанный на сетке 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>

Смотрите результат, который я получил здесь . Как видите, на очень маленьких разрешениях экрана блоки укладываются . Вы не сможете складывать ячейки таблицы или заголовки.

UPDATE:

Ваш заголовок раздела должен быть: 

<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>
0 голосов
/ 27 августа 2018

Вы можете дать любому: 33,33

0 голосов
/ 27 августа 2018

Стол и все его ячейки расположены по центру. Кажется, вы пытаетесь выровнять среднюю ячейку с логотипом выше, я бы посоветовал вам переместить логотип влево вручную, используя margin: -10px, если вы этого хотите.

В качестве теста, пытающегося сузить окно браузера, вы увидите, что средняя ячейка выровнена в некоторой точке и не выровнена.

0 голосов
/ 27 августа 2018

ширина ячейки таблицы изменяется с размером текста. Вы должны установить равную ширину ячеек таблицы 

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