2013-07-07 3 views
0

Я новичок в этом, и я пытаюсь центрировать три divs в нижнем колонтитуле bootstraps, но они, похоже, расположены по центру слева. Я ухожу из рамки Bootstrap Twitter и все еще изучаю веревки, поэтому, пожалуйста, сообщите мне, есть ли что-то, что я забыл. Спасибо!Центрирование трех divs в twitter bootstrap footer

HTML

<footer> 
    <div class="footer"> 
    <div class="container narrow row-fluid"> 

     <div class="span3"> 
      <h3>Contact Us!</h3> 
      <p>Have a question or comment? We can help you!</p> 
      <br>by phone: 555-555-5555 
      <br>by mail: [email protected] 
      <br>or by our: <a href="contact.htm">Contact Page</a> 
     </div> 


    <div class="span3"> 
     <a class="brand" href="index.htm"><img src="images/logo.png" alt="South Shore Bicycle and Fitness" align="middle"> </a> 
    </div> 

     <div class="span3"> 
      <h3>Newsletter</h3> 
      <p>Subscribe to our newsletter and get the latest news!</p> 
      <form action="php/mail.php" id="subscribe-form" method="post"> 
      <input type="text" name="email" id="email" placeholder="Your Email Address"> 
      <button type="submit" class="btn btn-primary">Sign Up</button> 
     </form> 
     </div> 

    </div> 
    </div> 
    </footer> 

CSS

.modal-footer { padding: 14px 15px 15px; 
margin-bottom: 0; 
background-color: #f5f5f5; 
border-top: 1px solid #ddd; 
-webkit-border-radius: 0 0 6px 6px; 
-moz-border-radius: 0 0 6px 6px; 
border-radius: 0 0 6px 6px; 
-webkit-box-shadow: inset 0 1px 0 #ffffff; 
-moz-box-shadow: inset 0 1px 0 #ffffff; 
box-shadow: inset 0 1px 0 #ffffff; 
*zoom: 1; 
vertical-align: middle; 
} 

.modal-footer:before, .modal-footer:after { 
display: table; 
content: ""; 
vertical-align: middle 
} 

.modal-footer:after { 
clear: both; 
vertical-align: middle 
} 

.modal-footer .btn { 
float: right; 
margin-left: 5px; 
margin-bottom: 0; 
vertical-align: middle 
} 

.span3 { 
width: 166px; 
} 

ответ

0

Вы можете использовать маржу: 0 авто; к центрам. Попробуйте добавить это правило в ваш CSS:

.span3{ 
    margin: 0 auto 
} 

Затем также дать один из див, которые содержат span3 это ширина:

.container{ 
    width: 515px /* The actual width may need to be higher or lower than this */ 
} 
+0

Спасибо за быстрый ответ, однако ITT все еще кажется, что осталось по центру , – gsmosk

Смежные вопросы