如何在Twitter Bootstrap 2.3.2中以流體佈局居中圖像？

我爲自己的網站使用引導程序，並且在爲一個jpg圖像居中而掙扎。如何在Twitter Bootstrap 2.3.2中以流體佈局居中圖像？

我用下面的代碼

<header class="row-fluid"> 
<div class="span4 offset4"> 
<img src="img/yup.jpg" title="Hello" alt="World";> 
</div> 
<div class="title span12"> 
<h1>Hello Kitty</h1> 
</div>   
</header>

，但仍然圖像不居中......這裏有什麼不好？非常感謝！

來源

2013-07-25 ℕʘʘḆḽḘ

試試這個

<header> 
    <div class="row-fluid"> 
     <div class="span5 offset2"> 
      <center><img src="img/yup.jpg" title="Hello" alt="World"></center> 
     </div> 
    </div> 
    <div class="row-fluid"> 
     <div class="title span12"> 
      <h1>Hello Kitty</h1> 
     </div>   
    </div> 
</header>

UPDATE : based on comment

當您使用排液，它會創建排它可以是由12份命名爲SPAN1，跨度2 ... span12管理。哪裏抵消是作爲餘裕申請。您可以按照您的要求使用它。它也分爲12個部分。在這裏，我使用了標籤，因爲您希望圖像位於中心，因此默認情況下它是左對齊的。

來源

2013-07-25 12:23:42

f %% ing magnet！他們如何工作？ ;-)所以我想圖像太大，只能包含在4個單元中？非常感謝shukla –

@Noobie - 瞭解bootstrap的工作原理並不困難。儘管如此，我仍盡力解釋你。 –

hello shukla ..另一點：我怎樣才能使圖像響應呢？當我減少我的導航，圖像保持不變... thx –

或者將圖像嵌入到div中，然後居中該div。以下是我如何做到這一點：

<form class="form-signin"> 
    <div id="auth-logo-container"> 
    <img src="http://www.fme.ma/wp-content/uploads/2012/02/logo.png"> 
    </div> 
    <br> 
    <br> 
    <input type="text" class="input-block-level" placeholder="Votre login"> 
    <input type="password" class="input-block-level" placeholder="Votre mot de passe"> 
    <br> 
    <br> 
    <button class="btn btn-large btn-danger input-block-level" type="submit">Sign in</button> 
</form> 
<style type="text/css"> 
.form-signin { 
    max-width: 300px; 
    padding: 19px 29px 29px; 
    margin: 50px auto 20px; 
    background-color: #fff; 
    border: 1px solid #e5e5e5; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
    box-shadow: 0 1px 2px rgba(0,0,0,.05); 
} 
#auth-logo-container{ 
    max-width: 247px; 
    margin: 0 auto; 
} 
</style>

來源

2013-10-04 14:55:33 ATJ

如何在Twitter Bootstrap 2.3.2中以流體佈局居中圖像？

回答

相關問題