Как выровнять картинку по центру bootstrap
Перейти к содержимому

Как выровнять картинку по центру bootstrap

  • автор:

Bootstrap. Выровнять содержимое по центру контейнера

А нужно, чтобы все это было по центру

Имеется вот такой контейнер. Как выровнять его содержимое по центру? В bootstrap есть тег center-top . Я его пробовал по разному применять, но нужного результата он мне не дал. Код ниже.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .top-cover < width: 100px; height: 100px; background-color: black; margin-right: 10px; margin-top: 15px; >.top-name

 

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Отслеживать
7,274 2 2 золотых знака 23 23 серебряных знака 45 45 бронзовых знаков
задан 19 мая 2016 в 19:31
Ivan Blohin Ivan Blohin
633 3 3 золотых знака 10 10 серебряных знаков 23 23 бронзовых знака

может поможет, а может и нет, без css стилей внутренних элементов трудно сказать

19 мая 2016 в 19:39
Не помогло. Добавил стили, посмотри, пожалуйста. Но не думаю, что там много чего интересного.
19 мая 2016 в 19:45
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
20 мая 2016 в 8:00

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В бутстрапе есть класс .center-block , который превращает элемент в блок и выравнивает его по центру контейнера. Нужно использовать именно его, а не .center-top или .centered-top .

Чтобы этот класс выровнял блоки по центру ячеек, нужно применить его к самим блокам, а из .top-cover удалить margin-right: 10px; .

 

Oxxxymiron - Город под подошвой

Но строки кода и без того чересчур длинные и однообразные. А по сути .center-block добавляет к блокам margin-left: auto; margin-right: auto; . Поэтому можно задать эти свойства стилям .top-cover и .top-name , которые вы уже используете, и обойтись без .center-block . А к .top-name добавить ещё и text-align: center; .

Кроме того, col-lg-2 col-md-3 col-sm-3 col-xs-6 — это то же самое, что и col-lg-2 col-sm-3 col-xs-6 . Заменил для красоты на col-lg-2 col-md-3 col-sm-4 col-xs-6 . Теперь при разной ширине экрана получается две, три, четыре или шесть колонок.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .top-cover < width: 100px; height: 100px; background-color: black; margin-top: 15px; >.top-name < display: block; width: 100px; max-height: 40px; overflow: hidden; text-align: center; >.top-cover, .top-name

 

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Oxxxymiron - Город под подошвой

Изображения

Документация и примеры для настройки изображений на адаптивное поведение (чтобы они никогда не становились больше, чем их родительские элементы) и добавления к ним легких стилей — все через классы.

На этой странице

Адаптивные изображения

Изображения в Bootstrap сделаны адаптивными с помощью .img-fluid . Это применяет max-width: 100%; и height: auto; к изображению так, чтобы оно масштабировалось вместе с родительским элементом.

Placeholder

img src=". " class="img-fluid" alt=". ">

Эскизы изображений

В дополнение к нашим утилитам border-radius Вы можете использовать .img-thumbnail , чтобы придать изображению округлую границу в 1 пиксель.

Обычное квадратное изображение-заполнитель с белой рамкой вокруг него, что делает его похожим на фотографию, сделанную на старую камеру мгновенного действия.

img src=". " class="img-thumbnail" alt=". ">

Выравнивание изображений

Выровняйте изображения по вспомогательным классам с плавающей точкой или классам выравнивания текста. Изображения уровня block можно центрировать с помощью утилиты класса поля .mx-auto .

Placeholder

img src=". " class="rounded float-start" alt=". "> img src=". " class="rounded float-end" alt=". ">

Placeholder

img src=". " class="rounded mx-auto d-block" alt=". ">

Placeholder

div class="text-center"> img src=". " class="rounded" alt=". "> div>

Картина

Если Вы используете элемент для указания нескольких элементов для определенного , убедитесь, что Вы добавили классы .img-* в , а не в тег .

picture> source srcset=". " type="image/svg+xml"> img src=". " class="img-fluid img-thumbnail" alt=". "> picture> 

Sass

Переменные

Переменные доступны для миниатюр изображений.

$thumbnail-padding: .25rem; $thumbnail-bg: $body-bg; $thumbnail-border-width: $border-width; $thumbnail-border-color: $gray-300; $thumbnail-border-radius: $border-radius; $thumbnail-box-shadow: $box-shadow-sm; 
  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.0.2.

Вертикальное выравнивание

Легко изменяйте параметры вертикального выравнивания встроенных элементов, встроенных блоков, таблиц и элементов ячейки таблицы.

Измените выравнивание элементов с помощью утилит вертикального выравнивания . Обратите внимание, что вертикальное выравнивание влияет только на встроенные элементы, встроенные блоки, встроенные таблицы и элементы ячейки таблицы.

Выбирайте из .align-baseline , .align-top , .align-middle , .align-bottom , .align-text-bottom и .align-text-top при необходимости.

С встроенными элементами:

baseline top middle bottom text-top text-bottom

 class="align-baseline">baseline  class="align-top">top  class="align-middle">middle  class="align-bottom">bottom  class="align-text-top">text-top  class="align-text-bottom">text-bottom 

С ячейками таблицы:

baseline top middle bottom text-top text-bottom
 style="height: 100px;">   class="align-baseline">baseline  class="align-top">top  class="align-middle">middle  class="align-bottom">bottom  class="align-text-top">text-top  class="align-text-bottom">text-bottom   

Изображения

Документация и примеры приведения изображений к отзывчивому поведению (так, чтобы их размер не выходил за рамки родительского элемента) и добавления к ним «легковесных» стилей – всё посредством классов.

Отзывчивые изображения

Изображения в Bootstrap делаются «отзывчивыми» с помощью .img-fluid . max-width: 100%; и height: auto; применяемых к изображению, которое т.о. масштабируется по родительскому элементу.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

Выравнивание изображений

Выравнивайте изображения вспомогательными классами выравнивания по стороне или классами выравнивания текста. Блочные изображения block можно центрировать использованием класса утилиты «марджина» the .mx-auto .

A generic square placeholder image with rounded corners

 class="text-center">  src=". " class="rounded" alt=". "> 

Картинка

Если вы используете элемент для привязки множественных элементов к определенному , добавьте классы .img-* в , а не в .

 srcset=". " type="image/svg+xml">  src=". " class="img-fluid img-thumbnail" alt=". "> 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *