. The “d-flex” class declares that the parent div is a flexible container, and the “align-items-center” class centers the image vertically inside the div. This works similarly to CSS Flexbox. Here’s the HTML with the result: Try it yourself! The code module above is editable. Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner. Pro tip: Use developer tools such as Chrome Dev Tools to inspect your page and verify the class being assigned to the element is correct. Here’s how to do this: Open Google Chrome. Right-click on the page and select inspect. Find the elements tab and click the element with the appropriate class name. Finally, verify the properties for the class under the styles tab to double-check its values. Free Guide: 25 HTML & CSS Coding Hacks Tangible tips and coding templates from experts to help you code better and faster. Coding to Convention Being Browser-Friendly Minimizing Bugs Optimizing Performance Download for free Learn more Are images inline or block elements in HTML? As you can see, the centering process isn’t difficult, but it varies depending on whether the elements are inline or block. There are a few differences between these element types, but the major difference is how they affect the flow of a page. It's important to understand this concept if you want to center elements beyond images. Block elements work by breaking the flow of a page, whereas inline elements work by going with the flow. Block elements start on a new line and take up the full width of the viewport (or the width of the page). Inline elements, on the other hand, occupy the space allotted by their HTML tags, allowing them to go with the “flow” of the page as opposed to interrupting it. Of course, the width and style of these elements vary depending on the CSS code for that HTML tag. Here’s an example to help visualize these differences. Below, I used a Bootstrap button styled as an inline element and a block element. how to center an image in css, inline block The inline button would need special code to be aligned to the center, while the block button would simply need some adjustments in width or padding. Tldr: Block and inline elements require different methods for aligning them to the center. For instance, when I center a div (which is a block element), you might use margin and padding or other methods. However, you cannot use these methods when centering images. That’s because images are inline elements and go with the flow of the page. Like the inline button above, you’ll need to use special code to place it in the center of the page. Should you center images with internal, external, or inline CSS? To center an image, you’ll need to use CSS, as we've already seen. But you have several options: internal CSS, external CSS, or inline CSS. Internal CSS is placed in the section of a webpage, while external CSS is located in an external stylesheet that’s then linked in the section. Inline CSS, on the other hand, is embedded in the HTML code in the section. The CSS is defined within the “style” attribute of the element being targeted. Generally, it’s recommended to keep your HTML separate from your CSS, but any of these methods will render the same result. If you can’t separate them for some reason — maybe the website-building platform you’re using keeps them together in the source code editor, for example — then you’ll have to use inline CSS. The good news is that the syntax for inline CSS is similar to that of internal and external CSS. The property is named and given a property value, but the rule set is enclosed by apostrophes rather than brackets. Here’s an example of inline CSS in action. Let’s say you want to change the text color of the first header on your page and leave the other headers as is. You’d set the color property to the hex color code you prefer, place it within the style attribute, and place the whole thing inside the H2 tag. Check it out below: How does this compare to internal CSS? Let’s say you wanted to use that same CSS but place it in the head section between >style> tags. You’d replace the “style=” attribute in your HTML with a CSS selector. A CSS selector is a name that you use to identify an HTML element. You then use this name in the CSS file to design the look and feel of that element. Note: In the example below, an ID selector is used, but you could also use a CSS class. This is also how the CSS would look in an external stylesheet. You would link to the external stylesheet between the tags of your page. Check out an example of an external stylesheet below with the same result: How to center an Image using Hubspot CMS If you are using a CMS like Hubspot Content Hub to design your pages, you can easily center your images using the layout editor. Here’s a preview of what that looks like: The picture above shows the image module in the inspector, which allows you to edit or add components to a template or module. To center the image, add the CSS text-align: center in the Inline styling field. Using HTML and CSS When Centering an Image With a bit of coding knowledge, you can bring a sense of symmetry and balance to your site with center-aligned images, texts, and buttons. Knowing how to align these elements will help you control and customize your layouts for a professional look that your website visitors will enjoy.