- Как выровнять HTML изображение по центру
- Центрирование в параграфе
- Центрирование при помощи отступов
- Центрирование при помощи атрибута align=middle
- Выравнивание изображения по центру по вертикали
- Одновременное центрирование по горизонтали и по вертикали
- How to center a picture on a web page using HTML
- Using the style attribute
- Example HTML code
- Example of image center using above code
- Converting to a block-level element
- Example HTML code
- Example centered image code
- Using the tag
- Example HTML code
- Related information
- CSS Image Centering – How to Center an Image in a Div
- How to Center a div using CSS
- How to Center an Image in a Div Horizontally with Text-align
- How to Center an Image in a Div Horizontally with Margin-auto
- How to Center an Image in a Div Horizontally with the Position and Transform Properties
- How to Center an Image in a Div Horizontally with Display-Flex
- How to Center an Image in a Div Vertically with Display-Flex
- How to Center an Image in a Div Vertically with the Position and Transform Properties
- How to Center an Image in a Div Horizontally and Vertically with Display-Flex
- How to Center an Image in a Div Horizontally and Vertically with the Position and Transform Properties
- Wrapping Up
Как выровнять HTML изображение по центру
Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру определенной секции. В этой статье мы обсудим множество возможных способов размещения изображений в центре заданной области.
В примерах данной статьи, чтобы сделать видимой границу оберточных элементов, мы сделаем их серого цвета. Итак, приступим.
Центрирование в параграфе
В первом примере мы покажем, как разместить изображение в центре элемента-контейнера, которым может быть элемент div, элемент параграфа и другие теги.
.aligncenter 
Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.
Центрирование при помощи отступов
Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.
.marginauto Центрирование при помощи тега
Следует помнить, что тег является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.
Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.
Нам не хотелось бы использовать устаревшие элементы в статье, поэтому здесь нет демонстрации этого примера, только код.
Центрирование при помощи атрибута align=middle
Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».
Выравнивание изображения по центру по вертикали
Выше мы обсуждали, как выровнять изображение по горизонтали, но могут быть случаи, когда вам нужно центрировать его по вертикали.
Для этого нам нужно сделать два шага. Оберточный элемент должен отображаться как ячейка таблицы, а выравнивание по вертикали должно быть установлено на середину. В нашем примере мы устанавливаем фиксированную высоту для контейнера, чтобы убедиться, что он выше, чем наша картинка.
.verticalcenter Одновременное центрирование по горизонтали и по вертикали
Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.
.verticalhorizontal Надеемся, что сегодня, прочитав эту статью, вы узнали что-то новое, и вы будете использовать полученные знания при разработке своих сайтов.
How to center a picture on a web page using HTML
Although it’s not necessarily difficult, centering images on your web pages may be more involved than you think. The main reason is that the tag is an inline element, so it behaves differently than block-level elements. Some approaches use HTML or CSS, and some are considered more «proper» than others in that they are not deprecated. To position an image in the center of your web page, select a method from the list below and follow the instructions.
Using the style attribute
For support in HTML5, use a style attribute with the value text-align:center inside of a block-level element; such as a tags.
Example HTML code
Placing the above code in a div may affect how it appears on a screen. For example, adding the code to a div with a right margin changes the location of the centered image.
Adding an inline style as shown above should ideally be done only once in a document. If you need to center multiple images, use the below suggestion and create a CSS class to help reduce redundant code and speed up your web page.
Example of image center using above code
Converting to a block-level element
One way you can properly center images is to define the element as a block-level element. To do this, add a rule to the head of your page (shown in the following example), or a linked external CSS file.
Example HTML code
With this code, you can apply the centerImage class to an tag without having to nest it in a block-level element. This method works for multiple images.
Example centered image code
Using the tag
You can center a picture by enclosing the tag in the tags. This action centers that, and only that, picture on the web page. It should be noted that this method is deprecated in HTML5 and will not always work in all browsers going forward. We only recommend using this method if none of the other suggestions mentioned above work where you are trying to center an image.
Example HTML code
Related information
- How to create images that are right-aligned on a web page.
- How to center text in HTML.
- See our HTML and CSS definitions for further information and links related to these terms.
- Computer Hope media library.
- HTML and web design help and support.
CSS Image Centering – How to Center an Image in a Div
Joel Olawanle
When you’re working on the front-end of a web page, you sometimes need to center an image within a div (container).
This can become tricky at times. And based on certain conditions, a particular method may not work at some point, leaving you searching for alternatives.
In this article, you will learn how to center an image in a div with CSS.
How to Center a div using CSS
You center an image in a div in two ways: horizontally and vertically. When you put these two methods together, you will have an entirely centered image:
By default, web content always begins from the top-left corner of the screen and moves from ltr (left to right) – except for certain languages like Arabic, which goes from rtl (right to left).
Let’s start by seeing how to center an image within a div horizontally. Then we’ll see how to center vertically. Finally, we’ll see how you can do both together.
How to Center an Image in a Div Horizontally with Text-align
Suppose you have a div in which you place your image this way:
And apply basic CSS styling so your image is visible:
The text-align method won’t work in all cases, as you typically use it to center text. But when you have your images within a block level container like a div , then this method will work:
This works by adding the text-align property alongside its value of center to the container and not the image itself.
How to Center an Image in a Div Horizontally with Margin-auto
Another method that you can use to horizontally center an image within a div (container) is the margin property with the value of auto .
The element will then take up the specified width , and the remaining space will be split equally between the left and right margins.
You would usually apply this method to the image itself and not the container. But unfortunately, this property alone doesn’t work. You also need to specify the width the image will take first. This lets the margin know the remaining width the container has so that it can be split equally.
Secondly, img is an inline element, and the margin-auto property set does not affect inline-level elements. This means you must first convert it to a block-level element with display property set as block .
How to Center an Image in a Div Horizontally with the Position and Transform Properties
Another method you can use to position an image horizontally is the position property alongside the transform property.
This method can be very tricky, but it works. You must first set the container’s position to relative , then the image to absolute .
Once you do this, you can now move the image to whichever position you wish using either the left , top , bottom , or right properties on the image.
In this case, you only want to move the image to the center horizontally. This means you would move the image via the left to 50% or right to -50%:
But when you check your image, you will notice that the image is still not perfectly placed in the center. This is because it started from the 50% mark, which is the center position.
In this case, you need to use the transform-translateX property to adjust it to get the perfect center horizontally:
How to Center an Image in a Div Horizontally with Display-Flex
CSS flexbox makes it easier for you to design flexible, responsive layout structures without using float or positioning. We can also use this to place an image in the center horizontally of a container using the display property with flex as its value.
But this alone doesn’t work. You also need to define the position where you want your image. This could be center, left or maybe right :
Note: The display: flex property is not supported in older versions of browsers. You can read more here. You’ll also notice that the width and height of the image are defined to ensure the image doesn’t shrink.
Let’s now learn how to center an image in a div vertically. Later we’ll see how to center an image in a div horizontally and vertically together, making it a perfect center.
How to Center an Image in a Div Vertically with Display-Flex
Just like how you were able to center the image horizontally with the display-flex method, you can also do the same vertically.
But this time around, you won’t need to use the justify-content property. Rather you’ll use the align-items property:
For this method to work, the container must have a specified height which you will use to calculate the height and know where the center is located.
How to Center an Image in a Div Vertically with the Position and Transform Properties
Similar to how you used the position and transform properties earlier to place your image in the center horizontally, you can also do the same vertically.
But this time around, you won’t use left or right, . Instead you will use top or bottom alongside translateY rather than translateX :
You have learned how to center an image within a div horizontally and vertically using all possible methods. Let’s now learn how to center both horizontally and vertically.
How to Center an Image in a Div Horizontally and Vertically with Display-Flex
The display-flex property is a combination of how you’d center the image vertically and horizontally.
For the flex method, this means you will use both the justify-content and align-items properties set to center :
How to Center an Image in a Div Horizontally and Vertically with the Position and Transform Properties
This is also very similar, as all you have to do is combine both ways you were able to center vertically and horizontally:
You can also combine the translateX and translateY by using translate(x,y) :
Wrapping Up
In this article, you have learned how to center an image in a div vertically, horizontally, or both.
You will often use the Flexbox method when moving an image to the center because the position method can distort your web page and works very trickily.
You can learn more about the CSS position method here and then more about the flexbox method here.