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

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

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

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

Центрировать объект HTML

Центрированный элемент также может быть вставлен в качестве фиксирующего элемента и, таким образом, предотвращает добавление других элементов слева и справа. Для этой операции мы используем свойство display, которое также служит для полного скрытия объекта.

Горизонтально центрированный текст

Для центрирования текста по горизонтали на странице вы можете использовать этот код

<style>.centrare {   text-align: center;}</style><div class="centrare">Testo da visualizzare al centro della riga</div>

где класс .central произвольный и может быть заменен другим. Код CSS также может быть вставлен просто встроенным с этим синтаксисом

<div style="text-align: center;" >Testo da visualizzare al centro della riga</div>

в котором нет необходимости вставлять класс CSS. Результат будет идентичным. Если вы поместите left  или right вместо center, текст будет отображаться слева и справа на странице соответственно.

В следующей статье я в основном буду использовать первые обозначения, помня однако что можно переходить от одного к другому. Первая запись полезна для вставки CSS в шаблон, а именно для вставки её над тегом </head> или над тегом ]]></b:skin> без двух тегов <style> и </style> для пользователей. платформы Blogger, в то время как вторая часть кода, то есть тег <div> (или <p> ), должна быть вставлена ​​в статью . Во втором случае вместо этого все вставляется на веб-страницу в режиме HTML. в отформатированный текст, вставив соответствующий код.

Горизонтальное центрирование блокированного элемента

Для центрирования контейнера <div> или даже изображения используются теги margin-left и margin-right. Как правило, вам не нужно использовать HTML-код для центрирования изображения в статье, потому что вы можете использовать кнопки выравнивания в редакторе. Однако их нет в виджетах, и их невозможно использовать для видео или для других объектов HTML, таких как контейнеры созданные с помощью тега <div>. В этих случаях мы используем этот код

<style>.centrami {   margin: 0 auto;}</style><div class="centrami" style="width:300px; height:100px; background-color:#aff;">Testo inserito all'interno del rettangolo contenitore</div>

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

Горизонтально центрировать видео

Видео Youtube, а также других сайтов для обмена видео, могут быть включены в веб-страницу с помощью кода iframe, предоставленного самим YouTube , нажав « Поделиться», чтобы перейти к <>.

<style> .centrami { text-align:center; }</style><div class="centrami"> <iframe width="560" height="315" src="https://www.youtube.com/embed/_lAYpn2pBJc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>

Вставка предыдущего кода в веб-страницу даст такой результат.

Для видео, а также для их центрирования на странице, они должны быть правильно видны и в мобильной версии.

Центрированный блокирующий элемент

Чтобы другие объекты HTML не отображались слева или справа от элемента, т. Е. Чтобы сделать его блокирующим элементом, используйте тег display: block; который, например, может быть добавлен ниже границы поля: 0 авто;

Код для центрирования трех контейнеров <div> может быть таким

<style>body {   background: #f45cf4;   font-size: 80%;}main {   background: white;   margin: 20px 0;   padding: 10px;}main div {   background: black;   color: white;   padding: 15px;   max-width: 125px;   margin: 5px;}.inline-block-center {   text-align: center;}.inline-block-center div {   display: inline-block;   text-align: left;}.flex-center {   display: flex;   justify-content: center;}</style><main class="inline-block-center">   <div>     Primo elemento di blocco centrato in una riga  </div>   <div>     Secondo elemento di blocco centrato in una riga con più elementi degli altri due che sono adiacenti.  </div>   <div>     Terzo elemento di blocco centrato in una riga.  </div></main>

что приводит к такому результату

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

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

Центрирование текста по вертикали означает оставление одинакового пространства сверху и снизу. Этот пример кода который используется.

<style>main {   background: white;   margin: 20px 0;   padding: 40px;}main div {   background: black;   color: white;  height: 100px;  line-height: 100px;   padding: 20px;   width: 50%;   white-space: nowrap;}</style><main>   <div>     Testo centrato verticalmente all'interno di un contenitore </div></main>

что приводит к такому результату

Хитрость заключается в том, чтобы установить высоту строки, равную высоте контейнера в желтой выделенной линии . В этом, как и в других кодах, мы используем тег <main>, который был введен в HTML5 и который служит для идентификации основной части документа . ширина: 50%; служит только для ширины контейнера.

Вертикальное центрирование большего количества текстовых строк

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

<style>div {   background: white;   width: 240px;   margin: 20px;}.flex-center {   background: black;   color: white;   border: 10px solid white;   display: flex;   flex-direction: column;   justify-content: center;   height: 240px;   resize: vertical;   overflow: auto;}.flex-center p {   margin: 0;   padding: 20px;}</style><div class="flex-center">   <p>Più linee centrate verticalmente in un contenitore in modo da avere la stessa distanza tra parte alta e bassa.</p></div>

Чтобы потом добиться этого результата.

Вы также можете добавить тег text-align:justify; ниже justify-content: center; для выравнивания текста .

Вертикальное центрирование блочного элемента

Следующий код является примером того, как вертикально центрировать один контейнер внутри другого.

<style>body {  background: #f06d06;  font-size: 80%;}main {  background: white;  height: 300px;  margin: 20px;  width: 300px;  position: relative;  resize: vertical;  overflow: auto;}main div {  position: absolute;  top: 50%;  left: 20px;  right: 20px;  background: black;  color: white;  padding: 20px;  transform: translateY(-50%);  resize: vertical;  overflow: auto;}</style><main>   <div>Elemento centrato verticalmente con una altezza non conosciuta a priori  </div> </main>

что приводит к такому результату.

Подсвеченный зеленый код используется только для добавления фона на страницу.

Центрировать элемент по горизонтали и вертикали

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

<style>body {  background: #f06d06;}main {  position: relative;  background: white;  height: 200px;  width: 60%;  margin: 0 auto;  padding: 20px;  resize: both;  overflow: auto;}main div {  background: black;  color: white;  width: 50%;  transform: translate(-50%, -50%);  position: absolute;  top: 50%;  left: 50%;  padding: 20px;  resize: both;  overflow: auto;}</style><main>   <div>Elemento centrato verticalmente e orizzontalmente con una altezza non conosciuta a priori   </div> </main>

что приводит к такому результату.

где зеленые выделенные теги предназначены только для фона.

Горизонтальное центрирование одного или нескольких изображений

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

<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/400/300"/>

для центрирования одного изображения, а для центрирования нескольких можно использовать этот код

<img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/600/300"/><br/><br/><img style="display: block; margin-left: auto; margin-right: auto;" src="http://lorempixel.com/450/200"/>

где я использовал переход строки <br/>, код для элемента блока и Lorem Pixel для случайных URL-адресов фотографий.