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

Как я могу выровнять этот текст по вертикали в середине div?
Я уже пытался изменить позицию с помощью relative/absolute и изменить top и left абзаца, но это вообще не работает.

 div.roxo{
      background-color: purple;
      padding: 40px;
    }
    div.amarelo{
      background-color: yellow;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.vermelho{
      background-color: red;
      height: 300px;
      width: 50%;
      float: left;
    }
    div.verde{
      background-color: green;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.azul{
      background-color: blue;
      padding: 40px;
    }
    p{
       margin: 0;
       text-align: center;
       vertical-align: middle;
    }

<!DOCTYPE html>
   <html>
    <head>
    <title>Page Title</title>
   
    </head>
    <body>
      <div class = "roxo">
    	  <p>roxo</p>
      </div>
      <div class = "amarelo">
    	  <p>amarelo</p>
      </div>
      <div class = "vermelho">
    	  <p>vermelho</p>
      </div>
      <div class = "verde">
    	  <p>verde</p>
      </div>
      <div class = "azul">
    	  <p>azul</p>
      </div>
    </body>
   </html>

html css alignment

27.05.2019 03:17

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

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

Ответы 1

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

Вы можете сделать это с помощью flexbox.

div.roxo{
      background-color: purple;
      padding: 40px;
    }
    div.amarelo{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: yellow;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.vermelho{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: red;
      height: 300px;
      width: 50%;
      float: left;
    }
    div.verde{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: green;
      height: 300px;
      width: 25%;
      float: left;
    }
    div.azul{
      display:flex;
       justify-content:center;
      align-items:center;
      background-color: blue;
      padding: 40px;
    }
    p{
       margin: 0;
       text-align: center;
       vertical-align: middle;
    }

<!DOCTYPE html>
  <html>
    <head>
    <title>Page Title</title>
   
    </head>
    <body>
      <div class = "roxo">
    	  <p>roxo</p>
      </div>
      <div class = "amarelo">
    	  <p>amarelo</p>
      </div>
      <div class = "vermelho">
    	  <p>vermelho</p>
      </div>
      <div class = "verde">
    	  <p>verde</p>
      </div>
      <div class = "azul">
    	  <p>azul</p>
      </div>
    </body>
  </html>

Просто добавь:

display:flex;
justify-content:center;
align-items:center;

в ваш div CSS.
Вы можете узнать больше о flexbox здесь, на https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

27.05.2019 03:35

Другие вопросы по теме

Как выровнять 2 формы в одну строку?

Есть ли способ изменить элементы страницы перед ее открытием

Почему загрузочный столбец не занимает 12 столбцов автоматически?

Высота Div в соответствии с содержимым

Пустое место рядом с содержимым, когда я уменьшаю размер экрана

Bootstrap - применить класс в зависимости от размера экрана

Мне нужна помощь в выравнивании текста по центру CSS Grid

CSS: перевести пробел между

Предупреждение: Prop `className` не соответствует ~ Пользовательский интерфейс материала css произвольно ломается при перезагрузке

Сохранять цвет фона после выбора, когда он находится в фокусе Microsoft Edge

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

Ответы 1

Другие вопросы по теме

Похожие вопросы