CODEWITHSUNDEEP
htmlcssimagecenter
user2826739
user2826739

Reputation: 53

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

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.

Upvotes: 2

Views: 198

Answers (5)

Amin Pourhadi
Amin Pourhadi

Reputation: 301

<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>

Upvotes: 0

Sobin Augustine
Sobin Augustine

Reputation: 3765

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;
}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240938

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;
}

Upvotes: 4

Splurk
Splurk

Reputation: 863

Try adding:

#right img {
    margin:auto;  
    display:block;
}

JSfiddle

Upvotes: 0

Imran Omer
Imran Omer

Reputation: 701

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.

Upvotes: 0

Related Questions