Trouble centering images in a div

Question

So I've been having trouble horizontal centering two images in a div called content-pic. I've tried the solutions found here How to vertically center image inside div and here How to vertically center image inside div the solutions didn't seem to work for my problem specifically. My question is how do horizontal center images via css in my div content below header? I is there a property that I'm missing or am i just going to have to mess around with padding/margin until they look right?

 html
<body>
   <div id="wrapper">
      <div id="header">
         <div id="mast"><img src="http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png" height="99" width="774=" /></div>
         <div id="below-mast">
            <!--Start of below mast -->
            <img class="nav" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="226" border="0" alt="Crusader Army" />
            <img class="Guy" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="297" width="549" border="0" alt="Crusader Army" />
         </div>
         <!--end of below mast -->
      </div>
      <!--end header -->
      <div id="content">
         <!--Start of content -->
         <img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
         <img class="content-pic" src="http://i157.photobucket.com/albums/t60/Dragon_Aleph/fantasy_warrior_23022-800x600.jpg" height="252" width="184" border="0" alt="Crusader Army" />
      </div>
      <!--End of content -->
      <div id="footer">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="whatIs1031.html">What is a 1031 Exchange?</a></li>
            <li><a href="exchangeRequ.html">
               1031 Exchange Requirements</a>
            </li>
            <li><a href="typesOfExchange.html">Types of Exchanges</a></li>
            <li><a href="howToStart.html">How to get Started</a></li>
            <li><a href="whyCLX.html">Why CLX?</a></li>
            <li><a href="resources.html">Resources</a></li>
            <li><a href="fAQs.html">FAQs</a></li>
            <li><a href="fees.html">Fees</a></li>
            <li><a href="contactUs.html">Contact Us</a></li>
         </ul>
      </div>
      <!--end of footer -->
   </div>
   <!--End of Wrapper -->

CSS

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0 auto; /* use shorthand */
  width: 774px;
}

#content {
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  background-color: green;
}

ul {
  list-style: none;
  margin: 20px auto;
  width: 600px;
}



dd {
  margin-left: 6em;
}

.nav{float: left;}

.Guy{width:500px;
  margin-left: 30px;
}

.content-pic{}
.we-pay {
  font-size: 13px
}

.note{
  text-align:center;
}


.disclaimer {
  font-size: 13px;
  text-align: center;
  font-weight: bold;
  font-style: italic;
}
.FAQ{
   font-size:14px;
}
.FAQ li{ 
  margin:20px 0px 20px 0px;
}

.Question{
  font-weight:bold;
}


#footer {
  clear:both;
  text-align:center;
  margin-top:300px;/* The margin is so large becuase it is cleared and need to be larger much large than content */
}

#footer li {
  display: inline;
  border-left: 2px solid #000;
  padding: 0 3px 0 3px;
}

#footer li:first-child {
  border: none;
}

#footer a {
  font-family: Helvetica, sans-serif;
  color: #300000;
}

Here is my code on code pen for you convenience http://codepen.io/Austin-Davis/full/fJLEn.

score 2 · Accepted Answer · answered Dec 28 '12 at 22:30

2

just remove the float: left; attribute from the content div. It will center the images.
Tell me if it is not what you want.

answered Dec 28 '12 at 22:30

syed mohsin

2,948
2
23
47

Bingo thanks dunno what I was thinking with the floated element – Austin Davis Dec 28 '12 at 22:32

score 2 · Answer 2 · answered Dec 28 '12 at 22:31

2

you should remove float:left from #content div

#content {
  /*float: left;*/
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  background-color: green;
}

answered Dec 28 '12 at 22:31

darkapple

539
1
7
19

Thank you for the correct answer, but syed moshin gave this answer first. – Austin Davis Dec 28 '12 at 22:32

JohnnyHunter · Answer 3 · 2016-09-23T21:32:50.193

1

Remove float:left and it'll work fine

edited Sep 23 '16 at 21:32

answered Aug 21 '13 at 08:48

JohnnyHunter

390
1
3
16

Jonathan Eckman · Answer 4 · 2012-12-28T22:29:40.977

I dont see a div called content_pic so I assume you want to center the div with id #content that has the img.content_pic in it.

Since its parent has a fixed width you could use the same technique you are using to center the wrapper:

#content {
   margin: 0 auto;
}

Based on your edit I now understand that you want to center the images inside the div #content. Well since that div does not have a set width, it is shrink wrapping your images. It doenst have room to justify your images horizontally.

You will need to set the width of the content div to be that of the wrapper and then center its contents, or you will have to give it a set width that is smaller than the wrapper and then use the technique I originally described.

Thanks for pointing out my original mistake referring to my class content-pic instead of content in my question. — Austin Davis, Dec 28 '12 at 22:35

Trouble centering images in a div

4 Answers4