Как центрировать изображение с жидким расположением в Twitter Bootstrap 2.3.2?

Я использую bootstrap для своего собственного сайта, и я стараюсь сосредоточить одно изображение 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, Span2 ... span12. Если смещение применяется как маржа слева. Вы можете применить его согласно вашему требованию. он также разделен на 12 частей. Здесь я использовал тег, потому что вы хотите, чтобы ваше изображение было в центре, поскольку по умолчанию оно выравнивается влево.

источник

2013-07-25 12:23:42

f %% ing магниты! как они работают? ;-), поэтому я думаю, что изображение было слишком большим, чтобы содержаться только в 4 ячейках? Большое спасибо shukla –

@Noobie - Немного смущает понять, как работает bootstrap. Тем не менее я попытался изо всех сил объяснить вам. –

привет 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?

ответ

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