In this example we will explore the different ways to center elements on the screen.
This paragraph is being centered by using a set width and margin:0 auto. The 0, for top and bottom margin, can be changed as needed.
Just some text
This image cannot be centered the same way as the paragraph and thus margin:0 auto doesn't work because the image is an inline element.
Here we are trying to center the paragraph using text-align:center on the parent. It isn't working because the parent is a block element.
Just some text
The img is being centered when the parent has text-align:center because the img is an inline element.
Here we set the paragraph to an inline element and now the text-align:center works.
Just some text
Here we set the img to a display:block element and so margin:0 auto works.