2015-05-29 3 views
0

Я использую тему начальной загрузки для личного сайта. В разделе контактов я пытаюсь заменить форму (которая идет с темой) с изображением того, где я живу.Изображение в столбце начальной загрузки не отображается как ожидалось

Проблема заключается в том, что изображение не оказывает в центре страницы (форма делает):

Вот HTML для формы:

  <div class="row"> 

      <div class="col-sm-6 col-sm-offset-3"> 

       <form id="contact-form" role="form"> 
        <div class="ajax-hidden"> 
         <div class="form-group wow fadeInUp"> 
          <label class="sr-only" for="c_name">Name</label> 
          <input type="text" id="c_name" class="form-control" name="c_name" placeholder="Name"> 
         </div> 

         <div class="form-group wow fadeInUp" data-wow-delay=".1s"> 
          <label class="sr-only" for="c_email">Email</label> 
          <input type="email" id="c_email" class="form-control" name="c_email" placeholder="E-mail"> 
         </div> 

         <div class="form-group wow fadeInUp" data-wow-delay=".2s"> 
          <textarea class="form-control" id="c_message" name="c_message" rows="7" placeholder="Message"></textarea> 
         </div> 

         <button type="submit" class="btn btn-lg btn-block wow fadeInUp" data-wow-delay=".3s">Send Message</button> 
        </div> 
        <div class="ajax-response"></div> 
       </form> 

      </div> 

     </div><!-- .row --> 

Form в Chrome Дев инструментов :

Form in Chrome dev tools

Вот как мой код выглядит:

  <div class="row"> 

       <div class="col-sm-6 col-sm-offset-3"> 
        <img src="assets/images/staticmap2.png"> 
       </div> 

      </div><!-- .row --> 

Изображение в Chrome Девых инструментов:

Image in Chrome dev tools

Я попытался изменить размер изображения и другое смещение размеров без толка. Я не понимаю, как это решить - может ли кто-нибудь помочь?

+0

Изображения вы вывесили выглядят одинаково с точки зрения расстояния. Можете ли вы опубликовать полный пример, который показывает разницу? – j08691

ответ

1

. Добавление класса center-block к вашему изображению применимо margin:0 auto; и должно центрировать изображение в его родительском div.

<img class="center-block" src="assets/images/staticmap2.png">

+0

Это отлично работает, спасибо! – NRKirby

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