Как выровнять по середине в css
Перейти к содержимому

Как выровнять по середине в css

  • автор:

Как отцентрировать текст в HTML

Не знаете как выровнять текст по центру в HTML? Отцентрировать текст в HTML можно, используя тег или применив выравнивание текста по центру CSS .

Использование тегов

Один из способов отцентрировать текст – заключить его в теги :

Центрировать этот текст!

Вставка этого текста в HTML-код приведет к следующему результату:

Центрировать этот текст!

Примечание: Сегодня тег признан устаревшим. И хотя он все еще работает, ожидается, что он будет удален. Для центрирования текста мы рекомендуем использовать CSS .

Использование свойства CSS

Можно отцентрировать текст при помощи CSS задав элементу, который должен быть отцентрирован, свойство text-align .

Центрирование нескольких блоков текста

Если у вас один или несколько текстов по центру блока CSS , которые необходимо отцентрировать, можно сделать это, добавив атрибут style к открывающему тегу элемента и использовав свойство text-align . В примере, приведенном ниже, мы добавили их к тегу

:

Центрировать этот текст!

Заметьте, что для свойства text-align мы установили значение center , которое означает, что элемент необходимо выровнять по центру.

Несколько блоков текста

Как выровнять текст по центру CSS , если много блоков текста? Вы можете использовать тег в секции head ( или во внешней таблице стилей ), чтобы отцентрировать каждый элемент.

Текст будет отцентрирован внутри каждой пары тегов . Если необходимо выровнять по центру только несколько параграфов, тогда можно создать класс CSS , как это показано ниже:

 .center

Если вы создадите класс center , как показано в предыдущем примере, параграф может быть отцентрирован с помощью приведенного ниже кода, который « вызывает » класс center :

Центрировать этот текст!

Совет : Созданный класс для CSS выравнивания текста по центру блока можно использовать для любого HTML-тега . Например, если вы хотите, чтобы заголовок располагался по центру, добавьте class=»center» в тег .

Сергей Бензенко автор-переводчик статьи « HOW TO CENTER TEXT IN HTML »

Подскажите как выровнять сайт по центру экрана.

Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

Хочешь все знать про SEO и создание сайтов? вступай (https://vk.com/pr_step_com).
На сайте с 21.04.2010
22 марта 2012, 16:00
body
На сайте с 28.02.2012
22 марта 2012, 16:10
Olldman:
body
Это понятно, а как быть с высотой, вы привели пример только с шириной.
На сайте с 21.04.2010
22 марта 2012, 16:21
А для вам высота? Она будет в зависимости от кол-ва контента.
На сайте с 28.02.2012
22 марта 2012, 16:23
Olldman:
А для вам высота? Она будет в зависимости от кол-ва контента.
Нет высота будет фиксированная. Это для главной страницы.
На сайте с 29.02.2012
22 марта 2012, 16:24
Высота у сайта резиновая. как сказал Olldman она зависит от контента. в css

 < 
margin: 0;
padding: 0;
border: 0;
>

HTML, body <
width: 100%;
height: 100%;
>

* HTML #container <
height: 100%;
>

body <
background: #fff;

На сайте с 01.01.2011
22 марта 2012, 18:30

Sirega85:
Вечер добрый, появился у меня вопрос по верстке, приходилось верстать не один сайт, но никогда не сталкивался с тем что макет нужно выровнять по центру экрана и по высоте и ширине. Подскажите как это сделать, ширина сайта будет min 1000px, max 1400px, высота 900px. В поиске пока подходящего ничего не нашел.

Вариантов много. Думаю основная сложность именно в вертикальном позиционировании, так что остальным пренебрегу. Приведу способ, который использую сам (допилить и сделать кроссбраузерным думаю не составит труда) HTML

  


1

1

1

1

1

1

1

1

body <
padding: 0;
margin: 0;
width:100%;
display: table;
vertical-align: middle;
height: 100%;
text-align: center;
>
#cross <
display: inline-block;
height:100%;
vertical-align: middle;
>
#container <
display: inline-block;
vertical-align: middle;
width: 1000px;
text-align: left;
>

LLIARK:
Высота у сайта резиновая. как сказал Olldman она зависит от контента.

 < 
margin: 0;
padding: 0;
border: 0;
>

HTML, body <
width: 100%;
height: 100%;
>
Либо у вас потерялся значимый кусок, либо ваш кусок не делает, ровным счетом, ничего.

* HTML #container <
height: 100%;
>

body <
background: #fff;

Как выровнять контент div по нижней границе

Рассмотрим пример и попробуем вместе разобраться с каждой частью кода.

1. Создайте HTML

  • Создайте с классом “main”. Он включает три других div.
  • Разместите тег в первом div, который имеет название класса “column1”, напишите в нем контент.
  • Второй имеет класс с названием “column2”.
  • Третий имеет id с названием “bottom”.
body> div >main"> div h2>W3docsh2> div> div Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> div >bottom">Нижний контент Divdiv> div> body>

2. Добавьте CSS

  • Используйте свойства border, float, height, width, position для добавления стиля к классу «main». Свойство float указывает, с какой стороны контейнера должны находиться элементы. Свойство position указывает положение элемента в документе.
  • Установите color для текста первого . В этом примере мы использовали значение hex для color.
  • Используйте свойство text-align для выравнивания внутреннего контента блочного элемента.
  • Используйте свойства bottom и left. Свойство bottom указывает для элемента нижнее позиционирование вместе со свойством position . Свойство left указывает левое позиционирование элемента вместе со свойством position .

Свойство float игнорируется, если элементы абсолютно позиционированы (position: absolute).

.main < border: 1px solid #4287f5; float: left; height: 180px; width: 500px; position: relative; > .column1< color: #4287f5; text-align:center; > .column2< text-align:center; > #bottom < position: absolute; bottom:0; left:0; >

Давайте соединим части кода и посмотрим, как он работает!

Результат нашего кода

html> html> head> title>Заголовок документа title> style> .main < border: 1px solid #4287f5; float: left; height: 180px; width: 500px; position: relative; > .column1< color: #4287f5; text-align:center; > .column2< text-align:center; > #bottom < position: absolute; bottom:0; left:0; > style> head> body> div class="main"> div class="column1"> h2>W3docs h2> div> div class="column2"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> div id="bottom">Нижний контент Div div> div> body> html>

Рассмотрим другой пример, где контент div выравнивается по правой стороне нижней границы.

Пример

html> html> head> title>Заголовок документа title> style> .main < border: 1px solid #4287f5; float: left; height: 180px; width: 500px; position:relative; > .column1 < color: #4287f5; text-align:center; > .column2 < text-align:center; > #bottom < position:absolute; bottom:0; right:0; > style> head> body> div class="main"> div class="column1"> h2>W3docs h2> div> div class="column2"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> div id="bottom">Нижний контент Div div> div> body> html>

Рассмотрим другой пример, где контент div выравнивается по центру нижней границы.

Пример

html> html> head> title>Заголовок документа title> style> .main < border: 1px solid #4287f5; float: left; height: 180px; width: 500px; position: relative; > .column1< color: #4287f5; text-align:center; > .column2< text-align:center; > #bottom < position: absolute; bottom:0; width:100%; text-align:center; color:#ffffff; background-color: blue; padding:15px 0; > style> head> body> div class="main"> div class="column1"> h2>W3docs h2> div> div class="column2"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. div> div id="bottom">Нижний контент Div div> div> body> html>

В этом примере мы задали 100% для width нижнего div .

Рассмотрим пример, где контент div выравнивается по центру с помощью flexbox. Flexbox — это одномерный макет, т.е. элементы расположены в виде строк или столбцов. В следующем примере мы использовали свойство flex-direction со значением «column». Свойство flex-direction указывает главную ось flex-контейнера и определяет порядок отображения флекс-элементов. Свойство justify-content выравнивает элементы, когда они не используют все доступное пространство по горизонтали. Значение «space-between» используется со свойством justify-content , когда доступно пространство между строками элементов.

Свойство justify-content должно быть использовано вместе со свойством display, которое имеет значение «flex». Для выравнивания элементов по вертикали используйте свойство align-items.

Пример

html> html> head> title>Заголовок документа title> style> main < border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ flex-direction: column; /* top to bottom */ justify-content: space-between; /* first item at start, last at end */ > h2 < margin: 0; > style> head> body> main> h2>Header title h2> Текст, выровненный по нижней границе main> body> html>

Рассмотрим другой пример, где использовано CSS свойство align-items . Оно указывает выравнивание по умолчанию для флекс-элементов. Это похоже на свойство justify-content , но является его вертикальной версией.

Обратите внимание, что некоторые браузеры не поддерживают display:flex. Используйте приведенные ниже префиксы.

display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;

Заметьте, что для поддержки всеми браузерами мы используем расширения -Webkit- и -Moz- вместе со свойством align-items .

Пример

html> html> head> title>Заголовок документа title> style> main < border: 1px solid green; background-color:green; color:#ffffff; padding:20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 150px; flex-direction:column; > h2 < margin: 0; > p< display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 150px; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin:0; > style> head> body> main> h2>Header title h2> p>Текст, выровненный по нижней границе p> main> body> html>

Давайте рассмотрим другой пример, где использовано свойство position . В нашем первом примере мы также использовали свойство position со значением «relative» для HTML-тега , а значение «absolute» было использовано для нижнего div .

В этом примере мы используем свойство span >position со значением «fixed» для . Свойство z-index указывает порядок элементов и потомков, или флекс-элементов по оси z.

Свойство z-index имеет эффект только на позиционированных элементах.

Пример

html> html> head> title>Заголовок документа title> style> * < margin: 0; padding: 0; > main< position:relative; > div< background-color: yellow; height: 200px; width: 100%; position: fixed; bottom: 0; z-index: 1; border-top: 2px solid gold; > style> head> body> main> h2>This is the header h2> div>Текст, выровненный по нижней границе div> main> body> html>

Как выровнять текст по центру в CSS

Как выровнять текст по центру в CSS

В CSS можно центрировать текст как по горизонтали, так и по вертикали, используя несколько различных методов, включая поля, подложки, flexbox, высоту строки и text-align. Способ центрирования текста зависит от того, как оформлена ваша веб-страница, и от того, хотите ли вы центрировать текст по горизонтали, по вертикали или по обоим направлениям. Ниже мы подробно рассмотрим центрирование текста по вертикали с помощью этих методов.

Как горизонтально центрировать текст в CSS

Горизонтальное центрирование текста в CSS может быть достигнуто с помощью свойств text-align и margin CSS. Свойство text-align выравнивает сам текст, в то время как свойство margin используется для центрирования контейнера, в котором находится текст.

Пример выравнивания текста по центру с помощью text-align и margin: auto

Горизонтальное выравнивание текста с помощью CSS-свойства text-align

В CSS добавьте свойство text-align: center к селектору, содержащему текст, который нужно выровнять по центру.

HTML

Выравнивание текста по центру с помощью text-align: center в CSS

Вход в полноэкранный режим Выход из полноэкранного режима

Горизонтальное выравнивание текста с помощью CSS-свойства margin

Когда вы работаете с элементом на уровне блока, вы можете выровнять его по центру с помощью свойства margin: auto в CSS. Это распространенная практика, когда нужно выровнять по центру текст, находящийся внутри блока содержимого. Маргинальное поле auto центрирует содержащий блок, но выравнивание текста остается неизменным.

HTML

Текст выровнен по левому краю в горизонтально центрированном поле содержимого

Выход

Центрированный текст внутри центрированного поля содержимого

Как выровнять текст по центру в CSS

Выровнять текст по вертикали в CSS можно с помощью свойств line-height и padding CSS. Line-height регулирует минимальную высоту каждой строки, на которой располагается текст — можно представить это как регулировку пространства между строками на линованном листе бумаги. Padding добавляет пространство между краем элемента (границей) и элементами, которые он содержит.

Вертикальное выравнивание текста с помощью CSS-свойства line-height

CSS-свойство line-height обычно используется для регулировки расстояния между несколькими строками текста (например, в тексте записи блога), но его также можно использовать для вертикального выравнивания текста, если вам известна высота содержащего его элемента.

Вот пример текста внутри содержащего div, у которого явно заданы высота и ширина.

HTML

Текст в левом верхнем углу поля содержимого

Выход

Вертикально выровненный текст в блоке содержимого с использованием свойства line-height

Теперь текст выровнен по вертикали внутри содержащего его div. Обратите внимание, что если вы напишете слишком много текста до момента, когда он перейдет на следующую строку, результат может быть нежелательным.

Вертикальное выравнивание с помощью CSS-свойства padding

CSS-свойство padding обычно используется для добавления пространства между краями (границей) элемента и его содержимым. В некоторых случаях оно может использоваться для вертикального выравнивания текста внутри элемента.

HTML

Вертикальное центрирование текста в контент-боксе с помощью padding

CSS

Мы установили содержащий div в flexbox, а затем выровняли текст. Мы используем justify-content: center для выравнивания текста по горизонтали и align-items: center для выравнивания текста по вертикали.

.text-container   display: flex;  justify-content: center;  align-items: center;  background-color: green;  ширина: 450px;  height: 300px; >
Выход

Вертикально и горизонтально центрированный текст в окне содержимого

Источники

  • CSS Layout — Horizontal & Vertical Align (Источник: W3Schools)
  • Как выровнять текст и заголовки по центру в CSS с помощью свойства Text-Align (Источник: HubSpot)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *