How do I center an <img> within a div? - html

Question

I have been trying to center this image inside its div, but it keeps aligning to the left.
HTML
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
I have tried using margin: auto; and align:middle; but neither seem to work.

Answer 1

No need for relative/absolute positioning.
A simple way to solve this is by setting display:block on the image.
jsFiddle demo - it works perfectly.
CSS
#main #right img {
margin: 0px auto;
display: block;
}

Answer 2

Try this:
HTML:
<div id="main">
<div id="left">This is a test</div>
<div id="right">
<h2 id="fish">Fishtail</h2>
<img height="150px" width="250px" src="image.jpg">
</div>
</div>
CSS:
#left, #right {
width: 40%;
margin:5px;
padding: 1em;
color:#51CBED;
font-size:20px;
padding:15px;
background-color:white;
}
#left {
float:left;
}
#right {
float:right;
text-align:center;
}
#fish {
text-align:center;
}
#main {
height:800px;
width:950px;
background-color:black;
opacity:.75;
filter:alpha(opacity=75);
margin-top:10px;
margin-bottom:75px;
padding:20px;
}
Jsfiddle: http://jsfiddle.net/hdMEQ/
I basically just added text-align: center; property in #right id.

Answer 3

Try adding:
#right img {
margin:auto;
display:block;
}
JSfiddle

Answer 4

Will get you the dead center with variable width and height or no need to know widths, heights.
set the position absolute in relative to which div you want the center the image
#main #right img {
position:absolute;
display: block;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
#right {
position:relative;
}

Answer 5

<style type="text/css">
.centerDiv {
margin-right: auto;
margin-left: auto;
width: 80px;
}
</style>
<div id="main">
<div id="left">This is a test</div>
<div id="right" class="centerDiv">
<div class="centerDiv">
<h2 id="fish">Fishtail</h2>
<img height="80px" width="80px" src="http://www.w3schools.com/images/w3html.gif">
</div>
</div>
</div>
</body>
</html>