Блог

Главная - Вопросы по программированию - Как создать горизонтальный центральный элемент сетки

Как создать горизонтальный центральный элемент сетки

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

У меня сетка из 12 столбцов. он написан для общих целей. В этом у меня есть только один дочерний элемент, который занимает 6 столбцов. я могу выровнять по вертикали. но не выровнен по центру. как это сделать?

есть ли какой-либо способ без изменения системы сетки? пожалуйста, помогите мне.

 .container{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  justify-content: center;
    align-content: center;
  height: 150px;
  border: 1px solid blue;
}

.container div {
  border: 1px solid red;
  grid-column: span 6;
} 
  <div class="container">
      <div>
        <span>1</span>
      </div>
    </div>

Заранее спасибо.

Ответ №1:

Добавьте правила grid-column-start и grid-column-end и удалите grid-column: span 6 из .container div . В вашем случае это должно выглядеть так:

 .container div {
  border: 1px solid red;
  /*grid-column: span 6;*/
  grid-column-start: 4;
  grid-column-end: 10;
}
 
 .container{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  justify-content: center;
    align-content: center;
  height: 150px;
  border: 1px solid blue;
}

.container div {
  border: 1px solid red;
  /*grid-column: span 6;*/
  grid-column-start: 4;
  grid-column-end: 10;
} 
 <div class="container">
      <div>
        <span>1</span>
      </div>
    </div>

Комментарии:

1. Я полностью согласен с вами. некоторое время у меня есть 3 элемента несколько раз по 2. существует ли какой-либо общий подход, отличный от ручного вычисления. поскольку таблица стилей используется совместно с несколькими пользователями..

Ответ №2:

область сетки представляет собой комбинацию row-start / column-start / row-end / column-end , и вы можете использовать ее следующим образом:

 .container{
  display: grid;
  grid-template-columns: repeat(12,1fr);
  justify-content: center;
    align-content: center;
  height: 150px;
  border: 1px solid blue;
}

.container div {
  border: 1px solid red;
  grid-area:1 / 4 / 1 / 10;
} 
 <div class="container">
      <div>
        <span>1</span>
      </div>
    </div>

больше объяснений для grid-area

Ответ №3:

Вы могли бы добавить выравнивание текста по центру в следующем классе.

 .container div {
  border: 1px solid red;
  grid-column: span 6;
  text-align: center;
}
Метки: