Css выровнять по ширине: text-align — Оформление текста. Знакомство — HTML Academy

Выравнивание блоков на всю ширину (justify)

Как в горизонтальным меню, метод с justify и after 100% можно использовать для выравнивания других элементов в одну линию на всю ширину родителя.

1

Ссылки в одну строку

<div>
	<a href="#">Apple</a>
	<a href="#">Xiaomi</a>
	<a href="#">Гаджеты</a>
	<a href="#">Смартфоны</a>
	<a href="#">Аксессуары</a>
</div>

.list {	
	text-align: justify;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	content: '';
	display: inline-block;    
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}
.list a {
	font-size: 20px;
	color: #0008ff;
}

2

Маркированный список в одну строку

<ul>
	<li>Apple</li>
	<li>Xiaomi</li>
	<li>Гаджеты</li>
	<li>Смартфоны</li>
	<li>Аксессуары</li>
</ul>

. list {	
	text-align: justify;
	margin: 20px 0;
	padding: 0;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}
.list li {	
	display: inline-block;
	padding: 20px 0;
	width: 127px;
	text-align: center;
	color: #fff;
	background: #f99752;
	font-size: 19px;
}

3

Div в одну линию

<div>
	<div>Apple</div>
	<div>Xiaomi</div>
	<div>Гаджеты</div>
	<div>Смартфоны</div>
	<div>Аксессуары</div>
</div>

body {
	background: #eee;
}

.list {	
	text-align: justify;
	margin: 20px 0;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}
.list-item {	
	display: inline-block;
	padding: 20px 0;
	width: 110px;
	text-align: center;
	color: #fff;
	background: #ff7d7d;
	font-size: 60px;
	border: 5px solid #fff;
}

CSS: Меню с выравниванием по ширине блока

просмотров: 1958021 мая 2012 года

Если вам нужно сверстать меню, в котором расстояние между элементами должно быть одинаковое и при этом родительский блок меню имеет автоматическую ширину, то совсем необязательно использовать для этой цели таблицу. Всё оказывается достаточно просто: можно сверстать семантическое меню через UL-LI или любой другой набор элементов (в примере DIV-SPAN). Ключевыми свойствами CSS будут text-align:justify и display:inline-block. Но только лишь этого недостаточно. Выравнивание по ширине в CSS работает по умолчанию для всех строк, исключая последнюю. 

Но что если у нас первая и последняя — одна и таже строка? В этом случае есть решение! Для всех современных браузеров (включая IE8), мы создадим псевдоэлемент через :after который будет иметь ширину 100%, тем самым гарантированно будет являтся последней строкой (той самой для которой правило выравнивания не будет действовать). IE6-7 не понимают псевдоэлементов CSS :after и :before, но у них есть специальное свойство, определяющее поведение последней строки при выравнивании текста. И это свойство text-align-last.

<style type="text/css">
    .menu {text-align:justify; text-align-last:justify; background:#DFDFDF; list-style-type:none; padding:0;margin:0;}
    .menu li {display:inline-block; background:#BBBBBB; padding:5px 10px; cursor:pointer;}
    .menu li:hover {background:#FFFFFF;}
    .menu:after {content:""; display:inline-block; width:100%; height:0; overflow:hidden;}
</style>
<ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Photo</a></li>
    <li><a href="#">Video</a></li>
    <li><a href="#">Contacts</a></li></ul>

Вячеслав (4 июня 2013 года, 20:36:41)

Спасибо большое автору за статью, очень помогла.

Лидия (13 ноября 2013 года, 14:05:59)

да. действительно очень полезная статья. спасибо

3 способа выравнивания блоков по ширине

Вы здесь:
Главная — CSS — CSS Основы — 3 способа выравнивания блоков по ширине

Сегодня мы разберем 3 основных способа выравнивания блоков по ширине с помощью CSS.

1. Выравнивание блоков на flexbox

На данный момент способ выравнивания блоков по ширине на флексах, самый простой, элегантный и имеет хорошую поддержку у браузеров. Чтобы решить нашу задачу, достаточно flex-контейнеру прописать всего два свойства: display: flex и justify-content: center.


// HTML разметка

<div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</div>

// CSS стили

.flex-container {

    display: flex;

    justify-content: center;

    margin-bottom: 20px;

}

.flex-item {

    width: 100px;

    height: 100px;

    border: 2px solid salmon;

    background-color: pink;

    margin-left: 20px;

}

2. Выравнивание на inline-block

Свойство заданное контейнеру text-align: center, поставит все блоки по центру. Свойство display: inline-block, удерживает блоки в одном ряду. Этот способ можно использовать при верстке блоков преимуществ, карточек членов команды. Одним словом — все отдельно стоящие блоки на странице.


// HTML разметка

<div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</div>

// CSS стили

.inline-container {

    text-align: center; /* выравнивание по центру */

    margin-bottom: 20px; /* отступ снизу */

}

.inline-item {

    display: inline-block; /* отобразить элементы в строку */

    border: 2px solid salmon; /* рамка у блока */

    background-color: pink; /* цвет блока */

    width: 100px; /* ширина блока */

    height: 100px; /* высота блока */

    margin-left: 20px; /* промежутки между блоками */

}

3. Выравнивание на float

При выравнивании блоков на флоатах, элементы один за другим извлекаются из потока и сдвигаются влево (float: left), пока не закончится место в ряду. Тем, кому не хватило места, спускаются на следующую строчку. До появления флексбоксов, флоаты были единственным адекватным способом выравнивания по горизонтали.


// HTML разметка

<div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</div>

// CSS стили

.float-container {

    margin-bottom: 20px; /* отступ снизу */

}

.float-item {

    float: left;

    border: 2px solid salmon;

    background-color: pink;

    width: 100px;

    height: 100px;

    margin-left: 22px; /* отбить блоки друг от друга */

}

В заключении хочу сказать, что самый актуальный способ выравнивания блоков на флексбоксах. И это неудивительно, ведь технология flexbox позволяет гибко управлять элементами на странице, без всяких костыльных методов. Выравнивание на флоатах — давно устаревший способ. Но стоит о нем знать, чтобы не растеряться, если потребуется вносить правки в старом проекте.

• 
  Создано 15.06.2020 10:53:50

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. 
   Кнопка:
   
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. 
   Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Выровнять текст, картинки или блоки div по ширине | text-align-last

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

Что значит выровнять текст по ширине? Это значит, что он будет прижат к обоим сторонам, его края слева и справа будут ровными. Чтобы браузер не растягивал пробелы, отчего текст становится плохо читаемым, нужно настроить перенос слов. Реализуется он очень просто с помощью того же CSS. Даже дефисы при необходимости ставятся с соблюдением правил русского языка.

<style>
#text {
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 
  text-align: justify;
}
</style>

<div lang="ru">содержимое</div>

Обратили внимание, что текст на последней строке не растягивается по всей ширине? А если строка всего одна, то она и будет последней. Вот тут и пригодиться свойство text-align-last. Оно управляет только поведением крайней строки абзаца.

<style>
#menu {
  text-align: justify;
  -moz-text-align-last: justify; text-align-last: justify;
}
#menu a {
  display: inline-block;
  white-space: nowrap;
}
</style>

<nav>
  <a href="#1">пункт меню 1</a>
  <a href="#2">пункт меню 2</a>
  <a href="#3">пункт меню 3</a>
</nav>

Поддержка браузерами ограничена, но можно немного пошаманить:

<style>
#menu1 {
  border: 1px solid #ccc; 
  text-align: justify;
}
#menu1 a {
  position: relative;
  top: 1.6em; 
  display: inline-block;
  white-space: nowrap;
}
#menu1:after { 
  content: '';
  display: inline-block;
  width: 100%;
}
#menu1:before {
  content: '';
  display: block;
  width: 100%;
  margin-bottom: -1.6em; 
}
</style>

<nav>
  <a href="#1">пункт меню 1</a>
  <a href="#2">пункт меню 2</a>
  <a href="#3">пункт меню 3</a>
</nav>

Как выровнять картинки по ширине

<style>
#img {
  text-align: justify;
  -moz-text-align-last: justify; text-align-last: justify;
}
</style>

<div>
  <img src="" alt=""/>
  <img src="" alt=""/>
  <img src="" alt=""/>
</div>

Как равномерно распределить блоки, если сайт резиновый

Вот возможности, которые предоставляют float: left; и display: table;. В данном примере если блоки не помещаются, то переходят на новую строку. flexbox всё же предоставляет больше возможностей.

Смайлик большой палец вверхДревний российский город Аркаи́мВесёлый паровозикУра

<style>
#div {
  background: #fff5d7;
  text-align: justify;
  -moz-text-align-last: justify; text-align-last: justify;
}
#div figure {
  display: inline-block;
  margin: 10px 0;
  padding: 5px;
  background: #fff;
  vertical-align: top;
}
#div img, #div figcaption {
  display: block;
  margin: 0 auto;
  text-align: center;
  -moz-text-align-last: center; text-align-last: center;
}
#div img {
  max-width: 190px;
}
#div figcaption {
  width: 190px;
}
@media (max-width: 440px) {
  #div {
    text-align: center;
    -moz-text-align-last: center; text-align-last: center;
  }
  #div figure {
    display: block;
  }
  #div img {
    max-width: auto;
  }
  #div figcaption {
    width: auto;
  }
}
</style>

<div>
  <figure>
    <img src="" alt=""/>
    <figcaption>аннотация</figcaption>
  </figure>
  <figure>
    <img src="" alt="">
    <figcaption>аннотация</figcaption>
  </figure>
  <figure>
    <img src="" alt="">
    <figcaption>аннотация</figcaption>
  </figure>
  <figure>
    <img src="" alt="">
    <figcaption>аннотация</figcaption>
  </figure>
</div>

Выравнивание justify для блочных элементов

Нашел отличную статью, подробно рассматривающую проблему выравнивания блочных элементов по ширине родительского контейнера. До этого момента, я, как и все, для выравнивания использовал горизонтальные отступы. Как правило, использовалось свойство margin-left, значение которого обнулялось для первого элемента коллекции. Это позволяло прижать первый элемент к левому краю без дополнительной разметки, достаточно было использовать псевдокласс :first-child, который поддерживается всеми браузерами, в том числе IE, начиная с версии 7. Основной минус в том, что приходилось вымерять отступ вплоть до одного пикселя. Также, при добавлении нового элемента, значение отступа снова требовалось калибровать. В отдельных случаях, все это не является большой проблемой. Но если требуется выровнять по ширине, например, пункты горизонтального меню, то ситуация в значительной степени ухудшается. Верстка перестает быть гибкой, мягко говоря.

В упомянутой статье описывается метод, который реализует настоящее выравнивание блочных элементов. Блоки выравниваются так, как это происходит с текстом, под влиянием text-align: justify. Так как статья там поистине огромная, я просто выделю предложенное решение в виде шпаргалки для дальнейшего использования.

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

И так, код реализации. Привожу его без лишних свойств. Исключение составляют только свойства width и height, но непосредственного отношения к решению они не имеют. Комментарии в коде авторские:

#container
{
	width: 50%;

	text-align: justify;
	
	/* Обнуляем для родителя*/
	line-height: 0;
	font-size: 1px; /* 1px для Opera */
	
	/* Лекарство для IE6-7*/
	text-justify: newspaper;
	zoom:1;
	
	/* Включаем в работу последнюю строку*/		
	text-align-last: justify;
	}
	#container:after
	{
		width: 100%; 
		height: 0px;
		visibility: hidden;
		overflow: hidden;
		content: '';
		display: inline-block;
		}
	#container > div
	{
		width: 100px;
		height: 100px;

		display: inline-block;
		text-align: left;
		border: 1px solid #000;
		
		/* Востанавливаем у потомков, кроме последнего*/
		line-height: normal;
		font-size: 14px;
		
		/* Без него в Opera будет отступ под элементами */
		vertical-align: top; 
		
		/* эмуляция inline-block для IE6-7*/
		//display : inline;
		//zoom : 1;
		}

Код html разметки:

<div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

Демо пример работы данного решения.

На основе статьи Равномерное выравнивание блоков по ширине.

markdown — Как выровнять по правому краю и по ширине в Markdown?

Текст Markdown всегда выравнивается по левому краю. Есть ли способ выполнить выравнивание по правому краю и выравнивание в Markdown?

Чтобы быть точным, я использую Markdown в Jupyter Notebook (IPython).

92

Ébe Isaac

29 Янв 2016 в 08:27

7 ответов

Лучший ответ

Выравнивание текста в нативной уценке невозможно. Однако вы можете выровнять текст с помощью встроенных тегов HTML.

<div> your-text-here </div>

Для обоснования замените right на justify в приведенном выше.

102

Ébe Isaac
7 Авг 2018 в 05:53

Специально для вашего использования Jupyter Notebook: возможность указывать выравнивание столбцов таблицы должна вернуться в будущей версии. (Текущие выпуски по умолчанию везде выравниваются по правому краю.)

Из PR № 4130:

Разрешить таблицам уценки указывать свое выравнивание с помощью синтаксиса: -,: — :, -:, при этом разрешая — по умолчанию выравнивание по правому краю.

Это отменяет предыдущее изменение (часть # 2534), которое удаляло информацию о выравнивании из обработанного HTML, выходящего из отмеченного средства визуализации. Чтобы быть ясным, это не меняет правильное выравнивание по умолчанию, но возвращает поддержку для переопределения этого выравнивания для каждого столбца с использованием синтаксиса выравнивания таблицы gfm.

…

1

patricktokeeffe
11 Июн 2019 в 21:30

Если вы хотите выровнять форму по правому краю, вы можете попробовать:

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

https://learn.getgrav.org/content/markdown#right-aligned-text

24

Peter Mortensen
19 Окт 2018 в 04:23

Если вы хотите использовать выравнивание по ширине в Jupyter Notebook, используйте следующий синтаксис:

<p> Your Text </p>

Для правильного выравнивания:

<p> Your Text </p>

12

Peter Mortensen
19 Окт 2018 в 04:24

Как упоминалось здесь, markdown не поддерживает текст или блоки с выравниванием по правому краю. Но результат HTML делает это с помощью каскадных таблиц стилей (CSS).

В моем блоге Jekyll используется синтаксис, который также работает с уценкой. Чтобы «завершить» блок, используйте два пробела в конце или два раза новую строку.

Конечно, вы также можете добавить css-класс с {: .right } вместо {: }.

Текст справа

{: }
This text is on the right

Текст как блок

{: }
This text is a block

3

KargWare
3 Май 2020 в 05:11

Если вы хотите использовать этот ответ, я обнаружил, что при использовании MacDown на MacO вы можете {{X0} } в начале документа, чтобы выровнять весь текст и сохранить все форматирование code. Может быть, он работает и в других редакторах, чтобы вы попробовали;)

2

Eradash
3 Янв 2019 в 14:51

В общем документе Markdown используйте:

<style>body {text-align: right}</style>

Или

<style>body {text-align: justify}</style>

Однако, похоже, не работает с Jupyter.

0

Giulio
8 Сен 2020 в 08:29

Все про CSS выравнивание. Равномерное выравнивание блоков по ширине

. У тега

есть атрибут align
, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left
, center
, right
. Давайте напишем код, где расположим элементы в различных частях браузера:
Выравнивание элементов в HTML

Текст, расположенный слева

Текст, расположенный по центру

Текст, расположенный справа

В данной статье вы научились выравнивать текст на html-странице
.

Здравствуйте! Продолжаем осваивать основы языка HTML. Посмотрим, что нужно писать, чтобы выровнять текст по центру, ширине или краям.

Переходя к делу, рассмотрим, как в HTML сделать текст по центру тремя разными способами. Последние два связаны непосредственно с таблицей стилей. Она может представлять собой файл CSS, который подключается к страницам сайта и задает их вид.

Способ 1 — прямая работа c HTML

На самом деле все достаточно просто. Смотрите пример ниже.

Выравнивание абзаца по центру.

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

• justify – выравнивание текста по ширине страницы;
• right – по правому краю;
• left — по левому.

По аналогии можно сдвинуть контент, который находится в заголовках (h2, h3), контейнере (div).

Способ 2 и 3 — использование стилей

Конструкцию представленную выше можно слегка трансформировать. Эффект будет таким же. Для этого нужно прописать представленный ниже код.

Текстовый блок.

В таком виде код прописывается непосредственно в HTML для выравнивания текстового контента по центру.

Есть еще альтернативный вариант добиться результата. Нужно будет проделать пару действий.

Шаг 1. В основном коде написать

Текстовый материал.

Шаг 2. В подключаемом файле CSS вписать следующий код:

Rovno {text-align:center;}

Отмечу, что слово «rovno» это все лишь название класса, который можно назвать и по-другому. Это остается на усмотрение программиста.

По аналогии в HTML можно запросто сделать текст по центру, ширине, а также выровнять по правому или левому краю страницы. Как видите, есть далеко не один вариант достичь цели.

Всего несколько вопросов:

• Делаете информационный некомерческий проект?
• Хотите, чтобы сайт хорошо продвигался в поисковых системах?
• Желаете получать доход в сети?

Если все ответы положительные, то просто посмотрите на о комплексном подходе к развитию сайта. Информация окажется особенно полезной, если он работает на CMS WordPress.

Хотелось бы подметить, что собственные сайты — это лишь один из множества вариантов сформировать пассивный или активный доход на просторах интернета. Мой блог как раз посвящен финансовым возможностям в сети.

Работали когда-нибудь в сфере арбитража трафика, копирайтинга и других направлений деятельности, которые приносят основной или дополнительный доход при удаленном сотрудничестве? Об этом и многом другом вы можете узнать прямо сейчас на страницах моего блога.

Впереди опубликую еще не мало реально полезной информации. Оставайтесь на связи. При желании можете подписаться на обновления Workip на e-mail. Форма подписки расположена ниже.

Большинство из нас со школьной скамьи имеют четкое представление об идеально оформленной странице. Равномерная россыпь букв, стройные линии слов, строгий, обрамленный ровными полями прямоугольник текста — именно такую картину мы наблюдаем, перелистывая любое печатное издание. Велик соблазн изобразить что-то подобное и на web-странице, тем более что для этого предложено всем известное средство — выравнивание текста по ширине. Однако что хорошо для типографа, то смертный грех для веб-верстальщика. А все потому, что применительно к разметке сайта эта функция обрастает таким количеством недостатков, что ее единственное достоинство в виде ровненького правого края просто меркнет на глазах. Вот лишь несколько причин, по которым стоит отказаться от выравнивания по ширине в пользу выравнивания по левому краю.

Видимый беспорядок внутри текстового блока

Да-да, чем ровнее края текстового блока, тем очевиднее бардак внутри него. В типографском деле стройности текста позволяет добиться целый арсенал инструментов: переносы, регулировка интервалов между словами и расстояний между буквами и даже чуть более широкие или чуть более узкие варианты шрифта. А вот макет интернет-страницы предполагает, как правило, только один способ «растянуть» строку от края до края — неконтролируемое увеличение ширины пробелов. Мало того, что это приводит к появлению неприглядных зазоров между словами, так эти зазоры, словно по закону подлости, частенько приходятся примерно на одно и то же место в каждой строке, образуя так называемые вертикальные «реки». Все это придает тексту весьма неопрятный вид.

Нечитабельность

Но если эстетикой еще можно было бы пожертвовать ради аккуратных краев, то вот очевидные проблемы с визуальным восприятием текста — все-таки слишком высокая плата за них. А выровненный по ширине текст объективно гораздо менее читабелен, чем выровненный по левому краю. Главная причина кроется все в тех же увеличенных интервалах между словами: глаз постоянно вынужден выискивать начало следующего слова, а из-за разности пробелов от строки к строке еще и перестраиваться с одного расстояния на другое.

Необходимость работать над длиной строки, зачастую безрезультатно

Справедливости ради стоит отметить, что обозначенные недостатки выровненного текста могут быть уменьшены за счет увеличения длины строки. Однако далеко не всегда этот метод будет эффективен. А вот снизить читаемость он может с очень большой долей вероятности: глазам трудно, просканировав до конца одну длинную строчку, точно и быстро перескочить на начало следующей.

Неприспособленность под мобильные устройства

Чем уже колонка с текстом, тем в меньшей степени он подлежит выравниванию по ширине. И здесь такой формат вступает в прямое противоречие с требованиями мобильных устройств, для которых, наоборот, чем короче строка, тем лучше. Согласитесь, одно дело следить взглядом за длинной строчкой на полноэкранном мониторе, и совсем другое — раз за разом прокручивать каждую строку назад и вперед. Сомнительное удовольствие, зато верный способ растерять мобильную аудиторию!

Казалось бы, стоит добавить на страницу функцию переноса слов, и все эти проблемы, возникающие при выравнивании текста по ширине страницы, были бы решены. Но в том-то и загвоздка, что HTML-разметка такой функции не предполагает. Вот и получается, что на сегодняшний день никакого другого способа сохранить допустимые интервалы между словами на web-странице, кроме как выравнивание текста по краю, не существует.

Таким образом, при создании интернет-страницы важно помнить главное: web-сайт — это не книга, и подходить к его оформлению нужно с тех позиций, которые диктуют технологии и психология воприятия, а не чьи-то эстетические воззрения, впрочем, весьма и весьма условные. Поверьте, если ваш текст будет аккуратно размещен и, в первую очередь, легко и с удовольствие читаем, никто и внимания не обратит на такую мелочь, как неровность полей!

Кстати, когда вы читали эту статью, вы обратили внимание на то, что текст не выровнен по ширине?

CSS: центрирующие элементы

CSS: центрирующие элементы

См. Также указатель всех советов.

Центрирующие предметы

Распространенной задачей CSS является центрирование текста или изображений. По факту,
существует три вида центрирования:

В последних реализациях CSS вы также можете использовать функции из
уровень 3, позволяющий центрировать абсолютно позиционированные элементы:

Центрирующие строки текста

Самый распространенный и (следовательно) самый простой тип центрирования — это
строк текста в абзаце или заголовке.CSS имеет
свойство text-align для этого:

П {выравнивание текста: центр}
h3 {text-align: center} 

отображает каждую строку в P или в h3 с центром между ее
поля, например:

Все строки в этом абзаце
по центру между полями абзаца благодаря значению
‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда нужно центрировать не текст, а
блок в целом.Или, говоря иначе: мы хотим левую и
правое поле должно быть равным. Для этого нужно установить поля.
на «авто». Обычно это используется с блоком фиксированной ширины,
потому что если сам блок гибкий, он просто займет все
доступная ширина. Вот пример:

P.blocktext {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 8em
}
...
 Это скорее ... 

Этот довольно узкий блок текста
по центру. Обратите внимание, что линии внутри блока не центрированы.
(они выровнены по левому краю), в отличие от предыдущего примера.

Это также способ центрировать изображение: превратить его в блок
свой собственный и примените к нему свойства поля. Например:

IMG.displayed {
    дисплей: блок;
    маржа слева: авто;
    margin-right: auto}
...
 

Следующее изображение отцентрировано:

Вертикальное центрирование

CSS level 2 не имеет свойства для центрирования вещей
вертикально. Вероятно, он будет на уровне CSS 3 (см. Ниже).Но
даже в CSS2 вы можете центрировать блоки по вертикали, объединив несколько
характеристики. Хитрость заключается в том, чтобы указать, что внешний блок должен быть
форматируется как ячейка таблицы, потому что содержимое ячейки таблицы
можно центрировать по вертикали.

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

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...

  
 Этот небольшой абзац ...
 

Этот маленький абзац расположен по центру вертикально.

Вертикальное центрирование в CSS, уровень 3

CSS level 3 предлагает другие возможности. В это время (2014 г.)
хороший способ центрировать блоки по вертикали без использования абсолютного
позиционирование (которое может привести к наложению текста) все еще ниже
обсуждение.Но если вы знаете, что перекрывающийся текст не будет
проблема в вашем документе, вы можете использовать свойство ‘transform’, чтобы
центрировать абсолютно позиционированный элемент. Например:

Этот абзац расположен по центру по вертикали.

Для документа, который выглядит так:

  
 Этот абзац…
 

таблица стилей выглядит так:

div.container3 {
   высота: 10em;
     позиция: относительная } / * 1 * /
div.container3 p {
   маржа: 0;
     позиция: абсолютная;  / * 2 * /
     верх: 50%;  / * 3 * /
     преобразование: перевести (0, -50%) } / * 4 * / 

Основные правила:

1. Сделайте контейнер относительно позиционированным, , который объявляет
   он должен быть контейнером для абсолютно позиционированных элементов.
2. Сделайте сам элемент абсолютно позиционированным.
3. Поместите его наполовину в емкость с надписью «верх: 50%».(Обратите внимание, что
   50% ‘здесь означает 50% высоты контейнера.)
4. Используйте перевод, чтобы переместить элемент вверх на половину его собственной высоты. (В
   ‘50%’ в ‘translate (0, -50%)’ относится к высоте элемента
   сам.)

Недавно (примерно с 2015 г.) стала еще одна техника
доступен в нескольких реализациях CSS. Он основан на новом
Ключевое слово flex для свойства display. Это ключевое слово имеет в виду
для использования в графических пользовательских интерфейсах (GUI), но вас ничто не останавливает
от использования его в документе, если документ имеет
правильная структура.

Этот абзац расположен по центру по вертикали.

таблица стилей выглядит так:

div.container5 {
  высота: 10em;
    дисплей: гибкий; 
    align-items: center }
div.container5 p {
  маржа: 0} 

Вертикальное и горизонтальное центрирование в CSS, уровень 3

Мы можем расширить оба метода до центрирования по горизонтали и
вертикально одновременно.

Побочным эффектом абсолютного позиционирования абзаца является
что тогда он будет ровно настолько широким, насколько он должен быть (если мы не дадим ему
явная ширина, конечно).В приведенном ниже примере это
именно то, что мы хотим: мы центрируем абзац всего одним словом
(«По центру!»), Поэтому ширина абзаца должна быть точно
ширина этого слова.

Желтый фон показывает, что абзац
на самом деле только настолько, насколько велико его содержание. Мы предполагаем ту же наценку, что и
перед:

  
 По центру!
 

Таблица стилей аналогична предыдущему примеру в отношении
до вертикального центрирования.Но теперь мы переместим элемент наполовину
по всему контейнеру, с ‘left: 50%’, и в то же время
время переместите его влево на половину его собственной ширины в ‘translate’
трансформация:

div.container4 {
    высота: 10em;
    position: relative}
div.container4 p {
    маржа: 0;
    фон: желтый;
    позиция: абсолютная;
    верх: 50%;
      осталось: 50%; 
      поле-право: -50%; 
    преобразовать: перевести ( -50%,  -50%)} 

Следующий пример ниже объясняет, почему «margin-right: -50%»
нужный.

Когда средство форматирования CSS поддерживает flex, это еще проще:

с этой таблицей стилей:

div.container6 {
  высота: 10em;
  дисплей: гибкий;
  align-items: center;
    justify-content: center }
div.container6 p {
  маржа: 0} 

, то есть единственное дополнение — это «justify-content: center». Только
как ‘align-items’ определяет вертикальное выравнивание
содержимого контейнера, ‘justify-content’ определяет горизонтальное
выравнивание.(На самом деле это немного сложнее, так как их имена
предлагаю, но в простом случае это работает именно так.) Побочный эффект
из ‘flex’ заключается в том, что дочерний элемент, P в данном случае, является
автоматически делается как можно меньше.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является
область просмотра. (В случае браузера это означает окно браузера). Так
центрировать элемент в области просмотра очень просто. Вот
полный пример.(В этом примере используется синтаксис HTML5.)

  <стиль>
    тело {
        background: white}
    раздел {
        фон: черный;
        белый цвет;
        радиус границы: 1em;
        отступ: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле-право: -50%; 
          преобразование: перевод (-50%, -50%) }
  
  <раздел>
    
 Красиво по центру 
    
 Этот текстовый блок центрирован по вертикали.
 И по горизонтали, если окно достаточно широкое.