Выровнять текст по середине поля сетки

Как выровнять текст по центру блока по вертикали? Это не центрирует текст посередине по вертикали. см. красную стрелку ниже.

.grid-container {
        display: grid;
        grid-template-columns: 140px 140px;
        grid-template-rows: 140px;
        align-items: stretch;
    }

img {
  width: 100%;
  height: auto;
}

.test
{
  text-align:center;
  vertical-align:center;
}

<div class = "grid-container" id = "gridid42f08d611e2346748fbe47264fd732e0">
    <img class = "imgcard mCS_img_loaded" id = "imgid42f08d611e2346748fbe47264fd732e00" src = "https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
    <div class = "test"> test </div>
</div>

тестовое задание

минимальный воспроизводимый пример!!!!!!!!!

— 09.07.2019 01:33

@Rob извиняется за проблему с редактором. только что исправлено. Благодарю. не стесняйтесь поднимать палец вверх вопрос

— 09.07.2019 01:37

как насчет align-items: center на .grid-container

— 09.07.2019 03:18

html css twitter-bootstrap

09.07.2019 01:26

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

140

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как насчет align-self: center; для ребенка? (см. также на MDN)

То есть:

.test {
  align-self: center;
}

Вот ваш пример, но с этим дополнительным свойством:

.grid-container {
  display: grid;
  grid-template-columns: 140px 140px;
  grid-template-rows: 140px;
  align-items: stretch;
}

img {
  width: 100%;
  height: auto;
}

.test {
  text-align: center;
  align-self: center;
}

<div class = "grid-container" id = "gridid42f08d611e2346748fbe47264fd732e0">
    <img class = "imgcard mCS_img_loaded" id = "imgid42f08d611e2346748fbe47264fd732e00" src = "https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
    <div class = "test"> test </div>
</div>

Кстати, в вашем вопросе есть vertical-align: center, что неверно; свойство vertical-align вместо этого принимает middle (по какой-то странной причине)

Спасибо, это работает! еще один быстрый вопрос: что, если вы хотите расположить заголовок слова по центру сверху, а описание - посередине той же правой ячейки?

— 09.07.2019 06:41

09.07.2019 05:33