Css текст по центру блока: Align выравнивание CSS уроки для начинающих академия

css — Выровнять текст по центру блока

Код:

div {
  background: #ff9438;
  height: 50px;
  border-radius: 10px;
}

ul {
  height: 100%;
  text-align: center;
}

li {
  margin: 0;
  width: 200px;
  height: 100%;
  display: inline-block;
  
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: 600;
}

li:hover {
  background: #f2efef;
  color: #bcbcbc;
}

<div>
    <ul>
      <li>MENU1</li>
      <li>MENU2</li>
      <li>MENU3</li>
      <li>MENU4</li>
    </ul>
</div>

Необходимо:

1. Текст внутри li расположить по центру. Не могу понять как это можно сделать максимально простым способом (не считая ручного подбора padding-top).
2. Как можно растянуть текст на всю высоту внутри li?

div {
  background: #ff9438;
  height: 50px;
  border-radius: 10px;
}

ul {
  height: 100%;
  text-align: center;
}

li {
  display: block;
  float: left;
  line-height: 2. 25em;
  font-size: 1.5em;
  margin: 0;
  width: 200px;
  height: 100%;
  color: #fff;
  font-family: sans-serif;
  font-weight: 600;
}

li:hover {
  background: #f2efef;
  color: #bcbcbc;
}

<div>
  <ul>
    <li>MENU1</li>
    <li>MENU2</li>
    <li>MENU3</li>
    <li>MENU4</li>
  </ul>
</div>

Методов решения очень много. Один из

6

Самое простое и кроссбраузерное решение — указать li высоту строки, равную высоте меню:

 li {
  line-height: 50px;
}

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

1

div {
  background: #ff9438;
  height: 50px;
  border-radius: 10px;
}

ul {
  height: 100%;
  text-align: center;
}

li {
    text-align: center;
margin: 0;
width: 24%;
height: 100%;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 1. 5em;
font-weight: 600;
line-height: 50px;
float: left;
list-style: none;
}

li:hover {
  background: #f2efef;
  color: #bcbcbc;
}

<div>
    <ul>
      <li>MENU1</li>
      <li>MENU2</li>
      <li>MENU3</li>
      <li>MENU4</li>
    </ul>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Центрирование в CSS для начинающих.

Учебник

Опубликовано 21 марта 2019 г. Алисией Рамирес и размещено в разделе CSS, Учебник.

Одна из вещей, которая расстраивает моих студентов, когда они впервые начинают изучать CSS, — это центрирование элементов. Есть много методов, многие из них не очень интуитивны. Некоторые требуют, чтобы вы применяли CSS к самому элементу, а другие — к родителю. Это очень расстраивает.

Это руководство предназначено для начинающих, которые пытаются найти правильный подход к центрированию объектов. Это не исчерпывающий список техник, а краткий список, призванный помочь запутавшимся.

Центрирование текста и изображений с помощью

text-align: center

Хотя изображения не являются текстом, их можно выровнять по этому правилу. Чтобы этот метод работал, вам нужно поместить его на родительский

текст или изображение.

См. Текст и изображения по центрированию пера Алисии Рамирес (@coopersita) на CodePen.36477

Центрирование изображений и блоков с полем

: 0 авто

Любой элемент блока (

,