Bootstrap: как центрировать выравнивание содержимого внутри столбца?

Простым сценарием использования является использование изображения или любого другого содержимого внутри столбца Bootstrap. И часто это содержимое должно быть в горизонтальном направлении.

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 text-center">
            <img class="img-responsive" src="img/some-image.png" title="this image needs to be centered">
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            some content not important at this moment
        </div>
    </div>
</div>

В версии 3.1.0 добавление текстового центра класса выравнивает изображение внутри столбца. Но я был вынужден перейти к версии 3.3.4, чтобы исправить некоторые другие проблемы, и это поведение (текстовый центр) теперь нарушено. У меня проблема с тем, как центрировать изображение или другое содержимое внутри столбца. Я хотел бы избежать необходимости добавлять класс к содержащимся элементам, поскольку это подвержено ошибкам или требует другого, содержащего div.

Ответы

Ответ 1

Хотите центрировать изображение? Очень просто, Bootstrap поставляется с двумя классами, .center-block и text-center.

Использовать первое в случае, если ваш образ является элементом BLOCK, например, добавление класса img-responseive в ваш img делает элемент img блочным. Вы должны это знать, если знаете, как перемещаться в веб-консоли и видеть прикладные стили для элемента.

Не хотите использовать класс? Нет проблем, здесь используется bootstrap CSS. Вы можете создать собственный класс или написать правило CSS для элемента, соответствующего классу Bootstrap.

 // In case you're dealing with a block element apply this to the element itself 
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}

// In case you're dealing with a inline element apply this to the parent 
.text-center {
   text-align:center
}

Ответ 2

Вы можете сделать это, добавив div i.e. centerBlock. И передайте это свойство в CSS, чтобы центрировать изображение или любой контент. Вот код:

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4">
            <div class="centerBlock">
                <img class="img-responsive" src="img/some-image.png" title="This image needs to be centered">
            </div>
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8">
            Some content not important at this moment
        </div>
    </div>
</div>


// CSS

.centerBlock {
  display: table;
  margin: auto;
}