CODEWITHSUNDEEP
htmlcss
Austin Davis
Austin Davis

Reputation: 3756

Trouble centering images in a div

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.

Upvotes: 1

Views: 352

Answers (4)

JohnnyHunter
JohnnyHunter

Reputation: 388

Remove float:left and it'll work fine

Upvotes: 1

darkapple
darkapple

Reputation: 549

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

Upvotes: 2

syed mohsin
syed mohsin

Reputation: 2938

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

Upvotes: 2

Jonathan Eckman
Jonathan Eckman

Reputation: 2077

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.

Upvotes: 0

Related Questions