Разрешить содержимое сетки

Я пытаюсь центрировать все содержимое grades_dashboard_box. Сам макет отличный, но содержимое должно быть сосредоточено в griddiv.

.separation {
	width: 100%;
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(2, auto);}
}

.grades_dashboard_box {
	height: 130px;
	width: auto;
	color: var(--text-color);
	transition: color 1s;
	margin: 0 auto;
	position: relative;
	display: flex;
  align-items: center;
}

.grade_info {
	margin-left: 20px;
}

.grades_dashboard_box>div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.grades_dashboard_box {
  width: 100px;
}

<div id = "grade_shortboard" class = "separation">
                    <div class='grades_dashboard_box'>
                      <div>
                        <h1 class = "grade_display" id = "grade_display_worst">14</h1>
                        <div class = "grade_info">
                          <p style = "font-size: 15px;">Schlechteste Durchschnittsnote</p>
                          <p id = "grade_display_worst_sub" style = "font-size: 20px;">Biologie</p>
                        </div>
                      </div>
                    </div>
                    <div class='grades_dashboard_box'>
                      <div>
                        <h1 class = "grade_display" id = "grade_display_average">7</h1>
                        <div class = "grade_info">
                          <p style = "font-size: 15px;">Gesamte Durchschnittsnote</p>
                        </div>
                      </div>
                    </div>
                    <div class='grades_dashboard_box'>
                      <div>
                        <h1 class = "grade_display" id = "grade_display_best">10</h1>
                        <div class = "grade_info">
                          <p style = "font-size: 15px;">Beste Durchschnittsnote</p>
                          <p id = "grade_display_best_sub" style = "font-size: 20px;">Swppl</p>
                        </div>
                      </div>
                    </div>
                  </div>

Here is an exampleimage:
CENTERED:
Разрешить содержимое сетки

NOT CENTERED:
Разрешить содержимое сетки

~filip

Обновлено:
Разрешить содержимое сетки
Как видите, шрифт поставляется из коробки. И насколько я знаю, эта коробка расположена по центру. Таким образом, для пользователя это не выглядит как центрирование поля из-за исходящего текста. Дополнительным способом было бы уменьшить шрифт, но я этого не хочу. Как исправить?

html css responsive-design

04.06.2019 23:31

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 2

Добавьте новый родительский элемент и дайте ему text-align:center;

.separation {
	width: 100%;
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(2, auto);}
}

.grades_dashboard_box {
	height: 130px;
	width: auto;
	color: var(--text-color);
	transition: color 1s;
	margin: 0 auto;
	position: relative;
	display: flex;
  align-items: center;
}

.grade_info {
	margin-left: 20px;
}

.grades_dashboard_box>div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.grades_dashboard_box {
  width: 100px;
}

#newParent{
text-align:center;
}

<div id = "grade_shortboard" class = "separation">
		<div id = "newParent">
                    <div class='grades_dashboard_box'>
                      <div>
                        <h1 class = "grade_display" id = "grade_display_worst">14</h1>
                        <div class = "grade_info">
                          <p style = "font-size: 15px;">Schlechteste Durchschnittsnote</p>
                          <p id = "grade_display_worst_sub" style = "font-size: 20px;">Biologie</p>
                        </div>
                      </div>
                    </div>
		</div>

04.06.2019 23:38

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

Я немного изменил ваш код, чтобы он соответствовал вашим потребностям. Я добавил ширина: 100 пикселей на сильный текст вместо .grades_dashboard_box Я также добавил поля:авто; в .grades_dashboard_box

.separation {
	width: 100%;
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(2, auto);}
}

.grades_dashboard_box {
	height: 130px;
	width: auto;
	color: var(--text-color);
	transition: color 1s;
	margin: 0 auto;
	position: relative;
	display: flex;
  align-items: center;
}

.grade_info {
	margin-left: 20px;
  width: 100px;
}

.grades_dashboard_box>div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.grades_dashboard_box {
    margin: auto;
}

<div id = "grade_shortboard" class = "separation">
                    <div class='grades_dashboard_box'>
                      <div>
                        <h1 class = "grade_display" id = "grade_display_worst">14</h1>
                        <div class = "grade_info">
                          <p style = "font-size: 15px;">Schlechteste Durchschnittsnote</p>
                          <p id = "grade_display_worst_sub" style = "font-size: 20px;">Biologie</p>
                        </div>
                      </div>
                    </div>
                    <div class='grades_dashboard_box'>
                      <div>
                        <h1 class = "grade_display" id = "grade_display_average">7</h1>
                        <div class = "grade_info">
                          <p style = "font-size: 15px;">Gesamte Durchschnittsnote</p>
                        </div>
                      </div>
                    </div>
                    <div class='grades_dashboard_box'>
                      <div>
                        <h1 class = "grade_display" id = "grade_display_best">10</h1>
                        <div class = "grade_info">
                          <p style = "font-size: 15px;">Beste Durchschnittsnote</p>
                          <p id = "grade_display_best_sub" style = "font-size: 20px;">Swppl</p>
                        </div>
                      </div>
                    </div>
                  </div>

Спасибо за быстрый ответ. Это мне очень помогло. По меньшей мере. Не могли бы вы взглянуть на мое редактирование и попытаться помочь мне снова?

— 06.06.2019 15:12

Рад слышать. Таким образом, для переполнения текста все, что вам нужно сделать, это добавить «word-break: break-word;» style в вашем классе .grade_info.

— 07.06.2019 00:20

05.06.2019 00:13