Як вирівняти зображення по центру за допомогою бутстрапу

Я використовую фреймворк bootstrap і безуспішно намагаюся відцентрувати зображення по горизонталі...

Я спробував різні методи, такі як розділення системи 12 сіток на 3 рівні блоки, наприклад

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Який найпростіший спосіб відцентрувати зображення відносно сторінки?

GEOCHET
Edited question 5-го травня 2014 в 10:11
Програмування
css twitter-bootstrap
4-го червня 2012 в 10:40
12 погляди

У бутстрапі Twitter є клас, який центрує: .pagination-centered

У мене це спрацювало:

<div class="row-fluid">
   <div class="span12 pagination-centered">![header](header.png)</div>
</div>

Css для класу наступний:

.pagination-centered {
  text-align: center;
}
Коментарі (2)

Якщо припустити, що поряд із зображенням немає нічого іншого, найкращим способом є використання text-align: center в батьківському елементі img:

.row .span4 {
    text-align: center;
}

Редагувати

Як згадувалося в інших відповідях, ви можете додати до батьківського елементу клас CSS bootstrap .text-center. Це робить те ж саме і доступно як в v2.3.3, так і в v3

My Head Hurts
Edited answer 2-го жовтня 2013 в 8:18
Коментарі (4)

Ви можете змінити CSS попереднього рішення, як показано нижче:

.container, .row { text-align: center; }

Це також повинно вирівняти по центру всі елементи в батьківському div.

Коментарі (0)