Вопрос:

Как я могу выровнять текст в одном теге по-разному?

html css text center text-align

31 просмотра

3 ответа

62 Репутация автора

Итак, у меня есть какой-то текст между тегом h2, и я хочу, чтобы весь тег h2 был в центре страницы. Но я также хочу разместить текст во второй строке, выровненный по правому краю.

Так это будет выглядеть примерно так: введите описание изображения здесь

Автор: Optic Lukie Источник Размещён: 08.04.2017 10:31

Ответы (3)


0 плюса

42 Репутация автора

Вы можете попробовать тег или свойство float с определенным классом.

Автор: Memristor Размещён: 08.04.2017 10:33

0 плюса

1 Репутация автора

добавив следующий синтаксис:

.class_name tag_name
Автор: Abhishek Mishra Размещён: 08.04.2017 10:35

1 плюс

176319 Репутация автора

Решение

Вы можете использовать CSS flexbox для простого и понятного решения.

main {                          /* 1 */
  display: flex;
  justify-content: center;
}

h2 {
  display: inline-flex;         /* 2 */
  flex-direction: column;
  align-items: center;
  margin: 0;
}

h2>span {
  margin-left: auto;            /* 3 */
}
<main>
  <h2>
    WebsiteName<span>.com</span>
  </h2>
</main>

Примечания:

  1. Контейнер уровня блока; дает h2пространство для горизонтального центрирования.
  2. Создайте h2контейнер встроенного уровня, чтобы размер окна был таким же широким, как и содержимое. Это позволяет первой и второй линиям выравниваться вправо.
  3. Выровняйте вторую строку справа.

Альтернативный метод, использующий абсолютное позиционирование , основанный на отзывах в комментариях:

h2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

h2>span {
  margin-left: auto;
}
<h2>
  WebsiteName<span>.com</span>
</h2>

Автор: Michael_B Размещён: 08.04.2017 10:45
Вопросы из категории :
32x32