Как центрировать изображение в HTML и CSS
Понимание того, как выравнивать элементы, важно для создания пользовательских макетов на вашем сайте.
Выравнивание элементов несложно, но процесс зависит от того, являются ли они блочными или встроенными элементами. Между этими типами элементов есть несколько различий, но главное – то, как они влияют на поток документа.
Проще говоря, блочные элементы прерывают поток, тогда как встроенные элементы идут вместе с потоком. Это означает, что элементы блока начинаются с новой строки и занимают всю ширину области просмотра. С другой стороны, встроенные элементы не начинаются с новой строки и не занимают всю ширину области просмотра. Конечно, ширина и стиль этих элементов могут измениться, если они указаны в CSS, но это их значение по умолчанию.
Вот пример, который поможет визуализировать эти различия. Ниже вы увидите кнопку Bootstrap, стилизованную как встроенный элемент и блочный элемент. Вы можете просмотреть код, щелкнув ссылку на источник.
Эти разные типы элементов требуют разных методов их выравнивания. Хотя методы центрирования элемента div, например, можно использовать для всех блочных элементов, их нельзя применять к изображениям. Это потому, что изображения являются встроенными элементами.
Ниже мы рассмотрим процесс центрирования изображения (или любого встроенного элемента) в HTML и CSS. Этот процесс будет работать независимо от того, создаете ли вы с нуля или используете фреймворк, такой как Bootstrap CSS. Давайте начнем.
Как центрировать изображение в HTML
Прежде чем мы обсудим различные способы центрирования изображения, важно прояснить, что на самом деле означает «в HTML».
Давным-давно был элемент центра HTML. Это был элемент уровня блока, который автоматически центрировал любой содержащийся в нем блок или встроенные элементы. Таким образом, для центрирования изображения потребуется одна строка HTML, которая выглядела бы примерно так:
<center><img src="image1.jpg" alt="centered image" height="598" width="398"> </center>
Однако этот элемент объявлен устаревшим в HTML4. Теперь, когда HTML5 стал стандартом, этот устаревший тег, скорее всего, не будет отображаться ни в каких современных браузерах.
Так в чем же процесс? Самое важное, что нужно понять, это то, что для центрирования изображения сегодня потребуется CSS. Вы не можете просто использовать HTML или CSS, если на то пошло. Но то, как вы добавляете CSS в HTML, может варьироваться.
Рекомендуется хранить HTML отдельно от CSS, помещая HTML в основной раздел документа HTML, а CSS в раздел заголовка или во внешнюю таблицу стилей. Если по какой-то причине вы не можете разделить их – возможно, платформа для создания веб-сайтов, которую вы используете, хранит их вместе в редакторе исходного кода, например, – тогда вам придется использовать встроенный CSS.
Встроенный CSS встроен в HTML в основной части. CSS определяется в атрибуте style целевого элемента. Синтаксис аналогичен синтаксису внутреннего и внешнего CSS: свойство CSS имеет имя и значение свойства, но со встроенным CSS этот набор правил заключен в апострофы, а не в квадратные скобки.
Вот пример. Допустим, вы хотите изменить цвет текста первого заголовка на своей странице на красный, а остальные заголовки оставить как есть. Затем вы должны установить свойство цвета в шестнадцатеричный код цвета для красного (# FF0000), поместить его в атрибут стиля и поместить все это внутри тега h2. Посмотрите это ниже.
Вот HTML:
<h2 style="color: #FF0000;">Inline CSS Example</h2>
<p>In this example, the inline CSS is used to style the above heading and no other headings on the page.</p>
<h2>Unstyled Heading</h2>
<p>Notice the heading above is not styled.</p>
<h2>Unstyled Heading</h2>
<p>Nor is this heading above.</p>
Вот как это будет выглядеть на передней панели:
Допустим, вы хотели использовать тот же CSS, но поместили его в заголовок или во внешнюю таблицу стилей. Вы бы заменили атрибут стиля в вашем HTML селектором CSS. В приведенном ниже примере используется селектор идентификатора.
Вот HTML:
<h2 id="first-heading">Internal CSS Example</h2>
<p>In this example, the internal CSS is used to style the above heading and no other headings on the page.</p>
<h2>Unstyled Heading</h2>
<p>Notice the heading above is not styled.</p>
<h2>Unstyled Heading</h2>
<p>Nor is this heading above.</p>
Вот внутренний CSS:
#first-heading {
color: #FF0000;
}
Примечание. Таким же образом CSS будет выглядеть во внешней таблице стилей.
Результат на передней панели такой же, как показано ниже:
Теперь, когда мы понимаем различные способы написания CSS, фраза «в HTML», скорее всего, относится к встроенному CSS. Итак, давайте посмотрим, как можно центрировать изображение, используя как HTML, так и CSS.
Как центрировать изображение в CSS
Есть несколько способов центрировать изображение, в зависимости от того, хотите ли вы центрировать его по горизонтали или по вертикали. Мы начнем с того, что посмотрим, как центрировать изображение по горизонтали, так как это проще.
Как центрировать изображение по горизонтали
Есть три способа центрировать изображение по горизонтали. Первый лучше подходит для изображений меньшего размера, а второй – для изображений большего размера. Третий вариант работает лучше всего, если вы используете гибкую модель макета Flexbox.
Мы рассмотрим все три, чтобы вы могли центрировать любое изображение, независимо от размера, на своем веб-сайте.
Использование свойства Text-Align
Чтобы центрировать изображение по горизонтали, я могу использовать свойство CSS text-align. Поскольку это свойство работает только с элементами уровня блока, а не со встроенными элементами, я начну с обертывания изображения в блочный элемент.
В приведенном ниже примере я собираюсь обернуть изображение в div, а затем применить атрибут style со свойством text-align, установленным в center. Это просто, но работает только в том случае, если изображение меньше вашего окна просмотра.
Вот HTML со встроенным CSS:
<h2>How to Center an Image with the Text Align Property</h2>
<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the text align property to center the image below. This is the simplest but most limited method: it only works if the image is smaller than the viewport.</p>
<div style="text-align: center;">
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
Вот как это будет выглядеть на передней панели:
Использование свойства маржи
Допустим, у меня есть очень большое изображение, которое я хочу центрировать. В этом случае я не собираюсь заключать изображение в блочный элемент. Вместо этого я собираюсь определить его с помощью свойства CSS display и установить для него значение «block». Это скажет браузеру обрабатывать изображение, как если бы это был блочный элемент, а не встроенный элемент, и позволит мне использовать свойство CSS margin.
Перед установкой полей я хочу установить фиксированную ширину изображения, чтобы оно не перекрывало область просмотра. В этом случае я буду использовать процентное значение 60%. Наконец, я установлю левое и правое поля на «авто», чтобы они были равны.
Вот CSS:
img {
display: block;
width: 60%;
margin-left: auto;
margin-right: auto;
}
Вот HTML:
<h2>How to Center an Image with the Margin Property</h2>
<p>In this example, the CSS margin and display properties are used to center the image below.</p>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
<p>First, the display property is set to "block," which tells the browser to apply the CSS as if it were a block element and not an inline element. The width of the image is then set to a fixed percentage value. The margins on the left and right are set to "auto," which means the remaining blank space of the viewport will be split equally on both sides.</p>
Вот как это будет выглядеть на передней панели:
Использование свойства Flex
Я также могу центрировать изображение по горизонтали с помощью свойства flex, которое не требует расчета полей.
Во-первых, я собираюсь обернуть изображение в элемент div. Затем я устанавливаю для свойства display значение «flex», которое сообщает браузеру, что div является родительским контейнером, а изображение – гибким элементом. Затем я устанавливаю для свойства justify-content значение «center».
Мой последний шаг – установить фиксированное значение ширины изображения.
Вот CSS:
div {
display: flex;
justify-content: center;
}
img {
width: 300px;
}
Вот HTML:
<h2>How to Center an Image with the Flex Property</h2>
<p>In this example, the CSS flex property is used to center the image below.</p>
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
<p>First, the image is wrapped in a div element. Then the display property is set to "flex," which tells the browser that the div is the parent container and the image is a flex item. The justify-content property is also set to "center." The width of the image is then set to a fixed length value.</p>
Вот как это будет выглядеть на передней панели:
Как центрировать изображение по вертикали
Центрировать любой элемент по вертикали сложнее, чем по горизонтали, но это все же выполнимо. Для демонстраций ниже я буду использовать внутренний CSS.
Использование свойства Position
Чтобы центрировать изображение по вертикали, вы можете обернуть его в элемент блока, такой как div, и использовать комбинацию свойства CSS position, свойств left и top и свойства transform. Вы начинаете с установки абсолютного положения div, содержащего изображение, чтобы оно было исключено из обычного потока документов.
Затем установите свойства left и top на 50%. Это указывает браузеру выровнять левый и верхний край div, содержащего изображение, с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице). Вот в чем проблема: если выровнять края div в середине страницы, то div будет выглядеть не по центру.
Вот где на помощь приходит свойство CSS transform. Чтобы по-настоящему центрировать div, содержащий изображение, вы можете использовать метод translate() для перемещения div по осям X и Y. В частности, вы хотите переместить div на 50% влево и вверх от его текущего положения, чтобы центр изображения совпадал с центром страницы. Чтобы перемещаться влево и вверх, вам нужно использовать отрицательные значения.
Вот CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Вот HTML:
<h2>How to Center an Image Vertically</h2>
<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the position, left, top, and transform properties to center the image below. </p>
<div class="center">
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
Вот как это будет выглядеть на передней панели:
Обратите внимание, что я добавил границу редактора кода, чтобы показать, что изображение не только центрировано по горизонтали, но и по вертикали.
В следующем примере я буду использовать Flexbox.
Использование свойства Flex
Чтобы центрировать изображение по горизонтали и вертикали с помощью Flexbox, вам нужно обернуть его в блочный элемент, например div. Вам нужно определить этот div как гибкий контейнер, установив для свойства display значение «flex». Затем определите для свойства align-items и justify-content значение «center». Это скажет браузеру центрировать гибкий элемент (изображение внутри div) по вертикали и горизонтали.
Последний шаг: не забудьте установить высоту HTML, тела и родительского контейнера на 100%.
Вот CSS:
html,
body {
height: 100%;
}
.parent {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Вот HTML:
<div class="parent">
<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">
</div>
Вот как это будет выглядеть на передней панели:
Я снова включил рамку редактора кода, чтобы показать, что изображение центрировано по горизонтали и вертикали.
Создание ваших макетов
Обладая небольшими знаниями в области кодирования, вы можете центрировать изображение по горизонтали и вертикали. Знание того, как выровнять изображения и другие встроенные элементы, поможет вам контролировать и настраивать макеты, чтобы вы могли создать сайт, который будет выглядеть и делать именно то, что вы хотите.
Источник записи: https://blog.hubspot.com