Сетка CSS выровнять по вертикали и горизонтали, не нарушая цвет фона или изображения

Question

Я создал .container с некоторым цветом и в этом заголовке контейнера с другим цветом и текстом. Теперь я хочу центрировать текст. Я могу сделать это с сеткой, но проблема заключается в том, что мой цвет заголовка (цвет фона заголовка) тоже уменьшается по вертикали и горизонтали по центру. Я хочу, чтобы в центре был только текст, а не цвет. надеюсь, я объяснил ясно. Пожалуйста, объясните мне, как я могу этого достичь. (

Я использую Visual Studio. align-item align-content align-self (on header) justify-item, content, self ничего не работает для меня, плз, убери мою путаницу

Мне нужен только текст в центре, если я помещаю изображение или логотип в центр. Я не хочу, чтобы фоновое изображение было компромиссным, и я хочу использовать только сетку. Я попробовал 6 команд сетки.

Я использую Visual Studio. align-item align-content align-self (on header) justify-item, content, self ничего не работает для меня, плз, убери мою путаницу

<div class="container">
    <div class="header">This is header</div>
        <div class="small-box-1">Small-Box1</div>
        <div class="small-box-2">Small-Box2</div>
        <div class="small-box-3">Small-Box3</div>
        <div class="main-content">Main Content</div>
        <div class="side-bar">Side-Bar</div>
        <div class="footer">footer</div>
    </div>
</div>

Answer 1

Чтобы отцентрировать элемент в сетке и избежать их сжатия, вам нужно будет заново установить систему сетки для ваших детей. Вы можете использовать flex или grid.

примеров (возможно, это не ваша таблица, но вам нужна база, которую вы не предоставили, если она не отвечает на ваш вопрос, уточните, пожалуйста, ваш вопрос)

• Flex можно использовать на дочерних элементах сетки для выравнивания по центру.

.container> div {
  display:flex;
  align-items:center;
  justify-content:center;
  
  background:tomato;
  border:solid;
}

/* reconstruction of a grid */
.container {
  display:grid;
  grid-template-columns:repeat(4,1fr);
    grid-auto-rows: minmax(150px,1fr);
  grid-gap:1em;
}
.container .header, .container .footer {
  background:lightblue;
  grid-column:span 4;
}

.small-box-1 {
  grid-column:2;
}
.main-content{
  grid-column:2 / span 3
}
.side-bar {
  grid-column:1;
  grid-row:2 / span 2;
}

<div class="container">
  <div class="header">This is header</div>
  <div class="small-box-1">Small-Box1</div>
  <div class="small-box-2">Small-Box2</div>
  <div class="small-box-3">Small-Box3</div>
  <div class="main-content">Main Content</div>
  <div class="side-bar">Side-Bar</div>
  <div class="footer">footer</div>
</div>

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

.container>div {
  display: grid;
  align-items: center;
  justify-content: center;
  
  
  background: tomato;
  border: solid;
}


/* reconstruction of a grid */

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, 1fr);
  grid-gap: 1em;
}

.container .header,
.container .footer {
  background: lightblue;
  grid-column: span 4;
}

.small-box-1 {
  grid-column: 2;
}

.main-content {
  grid-column: 2 / span 3
}

.side-bar {
  grid-column: 1;
  grid-row: 2 / span 2;
}

<div class="container">
  <div class="header">This is header</div>
  <div class="small-box-1">Small-Box1</div>
  <div class="small-box-2">Small-Box2</div>
  <div class="small-box-3">Small-Box3</div>
  <div class="main-content">Main Content</div>
  <div class="side-bar">Side-Bar</div>
  <div class="footer">footer</div>
</div>