Тот, кто владеет сайтом или блогом, часто сталкивается с необходимостью симметрично вставить в макет страницы или статьи определенный объект HTML, который может быть текстом, изображением, видео, фреймом или таблицей. , По правде говоря, когда мы говорим о центрировании объекта, мы должны указать, центрируется ли он по горизонтали или по вертикали.
Вставка вертикально центрированного объекта имеет смысл только в том случае, если он помещается в контейнер, оставляя одинаковое пространство сверху и снизу. Вместо этого центрирование объекта по горизонтали всегда имеет смысл и состоит в том, чтобы оставить то же пространство слева и справа от него.
Кто даже не знает HTML, можете в скором времени прочитать мою электронную книгу по HTML и CSS, в которой объясняются основы этих двух языков разметки. Для большей ясности я разделю темы на несколько разделов и покажу снимки экрана с кодами, вставленными в HTML- редактор в реальном времени, который показывает рендеринг кода внизу страницы.
- Центрировать объект 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-адресов фотографий.
