html - Having Trouble Centering a Div -


i trying have "boxes" div centered on page inside of div acts acting centered on page instead of pushed left.

unfortunately, way visioned css isn't way turned out.

if wouldn't mind looking on jsbin http://jsbin.com/ijifah/1 i'd appreciate it.

the end-goal have boxes centered on page.

  • initially thought put 3 boxes in div.
  • after, make boxes.
  • lastly, center div "boxes" contains 3 of boxes. unfortunately isn't working.

i have been using 

 {display:block;   margin-right: auto;   margin-left: auto;   }

to center lot of objects in css.

css:

.boxes  {     display: inline-block;     margin-right: auto;     margin-left: auto;     position: absolute; } .basecamp {     width: 160px;     height: 217px;     border: 1px solid #e8e8e8;     padding: 20px 10px 10px 10px;     font-family: lucida grande;     background: linear-gradient(#ffffff,#f0f0f0);     border-radius: 5px;     position: relative;     display: inline-block;     margin-right: auto;     margin: 0 20px; }  .logos {     position: relative;     display: block;     margin-right: auto;     margin-left: auto;     margin-bottom: 10px; }  .basecamp {     position: relative;     display: block;     margin-right: auto;     margin-left: auto;     font-size: 21px;     color: #3366a7;     text-align: center;     font-weight: bold;     font-family: lucida grande;     margin-bottom: -10px; }  .logo-headers {     color:#cc0000;     text-align: center;     position: relative;     font-size: 14px;     font-family: lucida grande; }    .logo-p { position: relative; text-align: center; font-family: lucida grande; font-size: 14px; margin-top: -10px;  }

html:

<body>   <div class="boxes">     <div class="basecamp">         <img src="images/logo-bc.png" alt="logo" class="logos">         <a href="#">basecamp</a>         <h5 class="logo-headers">manage projects</h5>         <p class="logo-p">used millions project management.</p>     </div>     <div class="basecamp">         <img src="images/logo-bc.png" alt="logo" class="logos">         <a href="#">basecamp</a>         <h5 class="logo-headers">manage projects</h5>         <p class="logo-p">used millions project management.</p>     </div>     <div class="basecamp">         <img src="images/logo-bc.png" alt="logo" class="logos">         <a href="#">basecamp</a>         <h5 class="logo-headers">manage projects</h5>         <p class="logo-p">used millions project management.</p>     </div> </div>   </body>

thanks help!

is you: http://jsbin.com/upuwil/1 ?
these 2 new css properties trick:

.boxes  {   text-align: center;   width: 100%; }

Comments

Post a Comment