Home > Chapter Review and Exercises > Chapter 14 - The Element Box > The Display Property
Here is an excellent explanation of the CSS display property, with many examples
Chapter 14 in the text (pages 380, 382) discusses the display property.
The display property was created to allow authors to specify how elements should behave in layouts.
Some of the values of the display property are none, inline, block, and inline-block. An example of these display property values is here.
The w3schools instruction on the display property is here. Scroll down the page, and test each of its values.
To center images on a website, use the display property's block value. Because the <img> element is an Inline element, you need to use the display property to make it a Block element. Here is an example from w3schools:
<!DOCTYPE html>
<html>
<head>
<style>
img { /* The selector is the img element */
display: block;
margin-left: auto; /* Alternately you can use margin: auto; */
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="img_paris.jpg" alt="Paris" style="width:50%;">
</body>
</html>
In the style section, img is used as the CSS selector, with the display: block; property and value.
It is also important to set the left margin and right margin to auto to allow for different screen sizes.
The inline CSS in the <img> element sets the width of the image to 50%. Note that the image cannot be centered if the width is set to 100% (full-width).