CSS, Web Development

CSS – Centering Image

Are you having trouble centering images via CSS? I’ve no problem with it since I can easily search the topic on the internet, but it bugs me every time I posted a blog here, with images that I set “center” but when viewed, it’s not actually centered.

When you post a blog in WordPress, the default mode is Visual Mode. Since I’m usually posting source codes, I need to switch it to HTML mode.

What happens is that in HTML mode, when I inserted an image, it did not get centered viewed on my blog. However, it works well in Visual mode.

 

Centered Image

One thing I’ve noticed is that in Visual mode, it adds a paragraph wrapper to the image, which is style to text-align center.

<p style="text-align: center;"> 
<!-- the image tag here --> 
<img src="the-source.jpg" alt="source" width="100" height="100" />

So now I know. And you too.