DEV Community

Discussion on: Alignment in CSS: text and vertical alignment

ezeugoobieze profile image
mr.Felistus • Edited on

Great piece, thanks for sharing.

What is the essence of adding a display property to an image?

tchaflich profile image
Thomas C. Haflich Author

Here is the MDN for display:

The two most simple types of display property are those that affect the element itself, and those that affect the things inside of it. An image is something that won't have anything inside of it, so we will take a quick look at the most popular display properties that affect the element itself.

display: block

This makes the image not "flow" horizontally with other things; it won't sit next to any text, and even if it doesn't fit all the way across the screen width-wise, it will block other things from taking up that space. By default, these take up 100% of available width.

display: inline

This makes the element "flow" horizontally with other things that "flow" horizontally (the "inline" direction). This is the same direction that words are displayed in a sentence in the given document.

Inline elements function "like text", and so many properties are restricted. You can set left and right margin and padding, but you cannot set top and bottom, or even an explicit width or height. They are automatically as small as they can be.

display: inline-block

If you were looking for the horizontal flow of an inline element, but the ability to set standard box model properties like a block element, this is the combined property that you want to use. It's placed like an inline element, but is styled more like a block element.

display: none

This visually hides the element, and makes it so screen-readers will not read it. Effectively, it makes it "not display".

So, with regards to alignment, you can use inline or inline-block for an image if you want to align it horizontally with something else. Block will force it onto its own line.

As a note, I will be covering some other properties (such as display: flex) in later articles in this series. They're quite complicated on their own!

ezeugoobieze profile image

Thanks a million... 👍