HTML CSS Image won't center? - html

Question

I am trying to center an image that is located within a div, which is then located inside of another div. Not to worry, I will post some code so you can all see what the heck I'm talking about here.
HTML:
<div id="container">
<div id="featureimage" style="width: 845px">
<img src="Stylesheets/images/globkey.jpg" alt="" />
</div>
</div>
CSS:
body {
background-color: #383838;
margin: 0; padding: 0;
font-size: small;
color: #383838;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
* html body {
font-size: x-small; /* for IE5/Win */
font-size: small; /* for other IE versions */
}
img {
border-style: none;
}
/* Conatiner */
#container {
background-color: #fff;
width: 845px;
margin: 0 auto;
overflow: hidden;
}
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
/* I have also tried without padding and no margin!*/
}
#featureimage img{
margin-left:50%;
margin-right:50%;
width:360px;
height:360px;
}
I am fresh out of ideas here! Been at this for ever!
Thank you for any help,
Evan

Answer 1

Images are inline elements, to center them, you can use text-align: center; or set them to display: block and set margin: 0 auto;

Answer 2

just for sure add text-align: center to your #container, and then add margin: 20px auto; to your featureImage. If you want img to be centered within featureImage should work (featureImage will inherit text-align: center).

Answer 3

According your provided markup structure it is enough to following way:
img {
display: block;
margin: 0 auto;
}
But above approach will work if container contain single image. Bu if container contain multiple image then above technique will not work anymore then following way would be ideal:
#featureimage {
text-align: center;
}
img {
display: inline-block;
vertical-align:top; // It is recommended when you use css property vertical-align
}

Answer 4

Use:
margin: auto !important;
display: block;
Also try going to Play Store download the app HTML code it will come in handy for you.

Answer 5

#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
text-align:center;
}

Answer 6

I would try this css:
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px auto 0px auto;
text-align: center;
}
I may be totally off on this one, as I haven't tested it out.

Answer 7

i would use this for sure,, the absolute; will keep it in that spot if you want it to move with the page put fixed; but other than that boom
#featureimage {
width: "change this code to whatever expample..." 555px;
height: "change this code to whatever example..." 96px;
position: absolute;
top: "change this to where ever it centers , you just have to mess with it.. example..." 960px;
right: "same with this i had to put - to get it right as far as i could just play with it..." -945px;
}

Answer 8

It can also be solved by simple put a <center> tag:
<center>
<img src="abc.gif">
</center>
But the best way and html5-like is as mentioned next:
define in the header:
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
To make use of this class in the body:
<img src="abc.gif" alt="abc" style="width: 90%; max-width: 300px;>
That's all. The last method is that recomended by w3c.