How to center align images on mobile devices

So I had this question when writing for this blog. How to center align images on mobile displays. All my post with aligned pictures to the right looked bad when I was browsing them on my mobile. This is a problem because the latest statistics indicate that approximately 50.88% of all users use a mobile device when browsing the web. The trend is going upwards so it’s important that your web page works and looks good on a smaller screen. After around 1hour of testing, it now works perfectly and the images are center aligned on mobile displays.

Edit the CSS in the template customization. Dashboard/Appearance/Customize/Additional CSS. Add the following code: @media screen and (max-width: 599px) { #page .alignleft, #page .alignright { float: none; display: block; margin-left: auto; margin-right: auto; }}

@media screen and (max-width: 599px) {
    #page .alignleft, 
    #page .alignright {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
    }
}

The code will be active if your screen resolution is below 599 pixels, like mobile displays. The result will be that images and pictures that are aligned left or right will be center in line between the text blocks. See the difference in the two pictures below.

This changes mage a huge impact on my webpages and will help with the readability for mobile user.