How to center an image in CSS
How to center an image in CSS
- Description
✓ This action which may seem simple in the imagination will be much more complex than you think if you do not use the right techniques.
✓ Indeed, depending on the structure of your HTML code, it will not always be enough for you to have a simple CSS property such as text-align when you want to center an image.
✓ Luckily for us, there are several methods in CSS to horizontally or vertically center an image in the center of your page or a container.
✓ Follow the following guide to learn how to perfectly center your images with a few lines of CSS.
✓ Before you can center the image, you need to have it embedded in HTML.
✓ Position your visuals effortlessly on your site Positioning images on a web interface often turns out to be a real headache.
✓ And don't forget to check that the final rendering is responsive and displays correctly on all screens and browsers! Save time and entrust the design and integration of your website to a professional.
Horizontally Center An Image In Css
✓ Nevertheless, here is a summary of the different ways to center your images horizontally. text-align:center
So The fastest CSS property to use and implement is text-align with the value center.
However, this will require your img tag to be contained between two tags
To apply the text-align: center; to the HTML div element.
If your image is outside of a div or in an HTML element of another type then your image will not be centered.
The Auto Margin
✓ Thanks to these two properties, which can be shortened to a simple margin: auto;, margins will be automatically created on the left and on the right of your image which will fill the “empty” and thus center your image.
✓However, there are two prerequisites for margin-left: auto; and margin-right: auto; work, which are: Define a width, different from 100%, to your image Convert your image to a "block" type For the first condition, you will simply need to use the width property on your img element (or one of its selectors) to define a width for your image that is not equal to the total width of the container (the screen or a HTML container) in which it is located.
✓Then for the second condition, a basic HTML img element is an “inline-element” or “inline element” and you must convert your image into a block-level element.
✓ To do this, simply apply the CSS property display: block; in your image.
✓ Once these two prerequisites are met, you can apply margin-left: auto; and margin-right: auto; or simply margin: auto; to your image to center it.
display:flex
✓ The last method we'll show you here is using display: flex; to center your image horizontally.
✓Just like text-align, this requires your image to be inside a container, but unlike the text-align technique, the container can be a different type of div.
✓ So you can horizontally center an image that is in a div, span, p, a or any other HTML element.
✓ The container should have display: flex; and justify-content: center; that work perfectly together.
✓ The image must have a width defined by the width property.
Vertically center an image in CSS
√ A little less intuitive, centering an element or an image vertically may seem less obvious than centering horizontally.
✓ Fortunately, there are methods to perform this operation to perfection!
✓ display:flex (again)
✓The display: flex; will allow us once again to center our image but now vertically.
✓ As a reminder, your image must be contained in another HTML element (its container) which must have the display: flex; and your image should have a width and a height that are both less than the dimensions of its container.
✓If the image has dimensions greater than those of its container then it will "visually" come out of the latter.
✓So unless it is wanted, remember to define at least one width property on your image but it remains optional to center the image vertically.
✓ Then, the last step to vertically center your image is to apply the align-items:center; property to its container.
✓You can also apply the property justify-content: center; this will center your image vertically and horizontally.
✓position:absolute and “transform” property There is another, albeit a bit more involved, method of centering your image vertically.
✓This way of doing it requires more understanding and technical implementation, but we will again guide you through the use of this technique.
✓ 1. First, you must have a container with a “relative” position.
√ To do this, use the position: relative; on your container.
√ In our example, we'll give our container a height of 300px:
✓ 2.Then, your image must be inside the previously created container and have a position defined as "absolute" with the CSS property position: absolute;
✓ 3.After that, you will need to move the initial position of your image to 50% from the top edge of its container.
√ This will move your image's starting coordinates to the vertical midpoint of its container.
✓ 4.Finally, you will need to move the center of the image to the vertical middle of the container.
√ Apply a transformation on the horizontal and vertical axis, X and Y, of 0% and -50% respectively to your image.
* If you wish, you can also center horizontally and vertically using this method.
✓ In this case, you just need to change the initial position of the image to 50% of the left side of its container and add a -50% transform on the horizontal (X) axis of the image.
Methods in CSS auto center an image
Center Your Images With A Few Lines Of CSS.
Use This Code To Auto Adjust The Shape of images on your website.
Code :
Conclusion
Which method to use will generally depend on the structure of your HTML code, other CSS properties used on your site, and possibly your preferences.
MERCI pour votre aide et votre partage