trying to place image in center (in responsive fashion)
I have tried the following approaches but they do not seem to work for me (I'm sure I am doing something wrong - I need help in figuring out what it is). The image is in the HTML header section (not body).
I have bootstrap in the HEAD section (before the image and it gets picked up from the browser cache so hopefully it gets used for the image in the header)
I have tried adding the following to the CSS for the image (and when it did not work, I tried adding a div around the image and assigned the class to the div):
display:inline; text-align:center; margin:auto;
I also tried the following in the CSS when option 2 did not work:
display:inline; margin:auto; horizontal-align:center;
I tried display:block in place of display:inline as well. Any thoughts on fixing this (specially without relying on bootstrap would be quite welcome). Thanks in advance!
First, you can't set a margin on an element that is set to
Here is a great guide that you should read:
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here