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

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

  • автор:

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

bootstrap

  • Bootstrap

Как убрать гамбургер-меню из бустрапа?

  • 1 подписчик
  • 19 окт.
  • 36 просмотров

html

  • HTML
  • +2 ещё

Почему в готовых шаблонах bootsnrap не подключают через cdn?

  • 1 подписчик
  • 17 окт.
  • 56 просмотров

bootstrap

  • Bootstrap

Как подтвердить форму в модальном окне Bootstrap + Django?

  • 1 подписчик
  • 08 окт.
  • 37 просмотров

html

  • HTML
  • +2 ещё

Изменение размера div в bootstrap, но оно не работает как надо?

  • 1 подписчик
  • 30 сент.
  • 79 просмотров

bootstrap

  • Bootstrap

Как в Bootstrap 4.5 сделать кнопку ЗАПИСАТЬСЯ по центру Navbar в мобильной версии?

  • 1 подписчик
  • 30 сент.
  • 29 просмотров

bootstrap

  • Bootstrap

Как сделать меню bootstrap и offcanvas?

  • 1 подписчик
  • 29 сент.
  • 17 просмотров

bootstrap

  • Bootstrap

Как сделать так, чтобы после контейнера было видно другой контейнер(Первый контейнер закрывает другие после себя)?

  • 1 подписчик
  • 03 сент.
  • 48 просмотров

bootstrap

  • Bootstrap

Не работает dropdown в bootstrap5?

  • 1 подписчик
  • 17 авг.
  • 65 просмотров

bootstrap

  • Bootstrap

Navbar занимает весь body?

  • 1 подписчик
  • 23 июл.
  • 51 просмотр

html

  • HTML
  • +2 ещё

Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?

  • 1 подписчик
  • 21 июл.
  • 66 просмотров

от 30 000 до 50 000 ₽

от 100 000 ₽

30 окт. 2023, в 08:03

5000 руб./за проект

30 окт. 2023, в 07:35

10000 руб./за проект

30 окт. 2023, в 05:47

200 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

  • Как узнать какой регион самый ранний по получению обновлении на Samsung?
    • 2 подписчика
    • 0 ответов
    • 2 подписчика
    • 0 ответов
    • 3 подписчика
    • 1 ответ
    • 2 подписчика
    • 2 ответа
    • 2 подписчика
    • 0 ответов
    • 2 подписчика
    • 0 ответов
    • 2 подписчика
    • 3 ответа
    • 1 подписчик
    • 2 ответа
    • 2 подписчика
    • 1 ответ
    • 2 подписчика
    • 0 ответов

    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 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков
    задан 19 мая 2016 в 19:31
    Ivan Blohin Ivan Blohin
    633 3 3 золотых знака 10 10 серебряных знаков 22 22 бронзовых знака

    может поможет, а может и нет, без 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 для оформления изображений

    Средства Bootstrap для оформления изображений

    Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).

    Чтобы сделать изображения гибкими к ним нужно добавить специальные классы этого фреймворка:

    • img-responsive в Bootstrap 3;
    • img-fluid в Bootstrap 4.

    После этого, размеры изображения будут уменьшаться, если его ширина будет больше ширины элемента, в котором оно находится.

    Эти классы на самом деле выполняют очень простые действия, они применяют к изображению CSS-свойства max-width:100% и height:auto .

    При необходимости можно не добавлять этот класс к каждому изображению, а выполнить это с помощью CSS. Для этого нужно в свой файл CSS внести одно из следующих CSS-правил:

    /* 1 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались как строчно-блочные элементы (inline-block) */ img { display: inline-block; height: auto; max-width: 100%; } /* 2 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались на странице как блочные элементы (block) */ img { display: block; height: auto; max-width: 100%; }

    Если необходимо сделать не все изображения на странице гибкими, а только те, которые расположены в определённом блоке, то в этом случае это необходимо определить с помощью CSS-селекторов:

    /* например, сделаем гибкими только те изображения, которые расположены в элементе с классом main */ .main img { display: block; height: auto; max-width: 100%; /* дополнительно их выровняем по центру */ margin-left: auto; margin-right: auto; /* и добавим внешний нижний отступ */ margin-bottom: 15px; }

    При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов width и height :

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

    Классы для изменения формы изображения и задания тени

    В Bootstrap 3 и 4 имеются классы, с помощью которых изображение можно заключить в рамку ( img-thumbnail ), скруглить ему углы (в Bootstrap 3: img-rounded , в Bootstrap 4: rounded ), или представить его в форме круга (в Bootstrap 3: img-circle , в Bootstrap 4: rounded-circle ).

    Классы фреймворка Bootstrap для изменения формы изображения

    . . . .

    Кроме этого, в Bootstrap 4 ещё имеются классы, с помощью которых вы можете добавить к изображению тень.

    Классы фреймворка Bootstrap для изменения формы изображения

    Классы для выравнивания изображений

    Изменить положение изображения в Bootstrap можно с помощью утилитных классов:

    • в Bootstrap 3: pull-left , pull-right , center-block , text-left , text-center и text-right ;
    • в Bootstrap 4: float-left , float-right , mx-auto d-block , text-left , text-center и text-right .

    Первые два класса как в первом, так и во втором списке предназначены для выравнивания изображения посредством задания ему CSS-свойства float со значением left или right .

    Классы Bootstrap для выравнивания изображения по левому или правому краю

    .

    Установка изображению center-block (Bootstrap 3) или mx-auto d-block (Bootstrap 4) предназначено для выравнивания изображения по центру. Эти классы задают изображению блочное отображение, а затем выравнивают его через margin-left: auto и margin-right: auto .

    Классы Bootstrap для центрирования изображения

    .

    Классы text-left , text-center и text-right предназначены для выравнивания изображений, которые отображаются на странице только как строчно-блочные ( display: inline-block ) элементы. Для этого изображение необходимо поместить в элемент, например, div и добавить к нему один из этих классов.

    Варианты оформления изображений

    В этом разделе рассмотрим примеры оформления изображений с помощью CSS.

    1. Пример, в котором показано как можно разместить текст поверх изображения.

    Оформление изображений – вариант 1

       
    Описание изображения.
    Заголовок для текста
    Текст поверх изображения.

    В этом примере для размещения текста поверх изображения используется техника совместного использования относительного и абсолютного позиционирования. Познакомиться с методами позиционирования элементов в CSS можно в этой статье.

    2. Рамка для изображения с использованием CSS-свойств border , outline и outline-offset .

    Оформление изображений – вариант 2

    3. Изображение, стилизованное с использованием CSS-свойств border и box-shadow .

    Оформление изображений – вариант 3

    4. Изображение, оформленное с помощью CSS-свойств border и box-shadow .

    Оформление изображений – вариант 4

    5. Пример, в котором показана CSS3 техника для установки фонового изображения на весь экран.

    Установка фонового изображения на весь экран

    /* CSS */ html { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

    6. Пример, в котором элементу установим фоновое изображение.

    Установка изображения в качестве фона в Bootstrap выполняется средствами CSS. Для этого используется свойство background-image или background .

      
    .

    Изображение применять в качестве фона рекомендуется только в том случае, если оно не является частью контента, а используется только для оформления.

    Если статья понравилась, то поделитесь ей в социальных сетях:

    Комментарии: 44

    09.07.2023, 10:27

    Не нашел подходящего ответа в поиске, спрошу десь.

    Есть странички, на которых картинки 2х видов, вертикальные и горизонтальные ( https://roomflow.top/why-brown-is-the-color-taking-over-interiors-in-2023.html , https://roomflow.top/a-room-with-wood-walls-cozy-and-inviting-dcor-ideas.html ), можно ли добиться как-то одним css без изменений имени классов что бы вертикальные картинки не были бы слишком высокие, при этом горизонтальные картинки не были слишком мелкими).

    Что я только не пробовал, либо одна слишком большая а вторая норм, либо первая норм а вторая слишком мелкая.

    зы. Как вы сделали так, что бы у вас гугл поиск был без рекламы? Я когда ставил формы то первые сообщения это реклама.

    Александр Мальцев
    09.07.2023, 13:59

    Можно попробовать max-width и max-height :

    При необходимости можно ещё сочетать это с @media , чтобы на разных экранах настроить эти свойства по-разному.

    09.07.2023, 14:20

    так я тоже делал, только вы усложнили, ну что бы по центру все было.

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

    06.04.2021, 21:59

    Спасибо! Очень интересно и полезно! Хотелось бы послушать насчет решения нестандартных задач типовыми методами этого фреймворка. Кстати, вот что посоветуете для отображения лишь части галереи? В частности, первых двух рядов. Но что бы при нажатии на большую кнопку галерея раскрывалась вся? Мне приходит на ум открывать новую страницу, куда все изображения будут загружаться из БД. Но вот есть чуйка, что существует и более изящное решение.
    src=«https://itchief.ru/assets/uploadify/9/8/8/98872161677aa5faa52efe289f69d321s.jpg» thumbnail center»>

    04.07.2020, 17:34

    Александр, спасибо за материал!
    Второй день осваиваю Bootstrap 4. Не могу в середину изображения поместить текст(
    Делаю так:

     

    Текст

Но текст оказывается под изображением. Как это исправить (желательно средствами Bootstrap)?
Александр Мальцев
05.07.2020, 16:21
Привет! Для этого вам нужно использовать абсолютное позиционирование:

 

Текст

05.07.2020, 16:26
22.08.2017, 18:18

Добрый день! Я правильно понимаю, что «img-rounded center-block» центрует по горизонтали, а как выровнять по вертикали?

Александр Мальцев
23.08.2017, 17:48
С помощью CSS Flexbox это можно выполнить следующим образом:

19.07.2017, 22:36

Познавательная статья, спасибо!
Интересно, а как например сделать чтоб крайние (левая и правая) при манипуляции с окном уменьшались/увеличивались, а средняя имела постоянный размер? При этом крайние не залазили не на неё, не под неё…

Александр Мальцев
20.07.2017, 15:43
Для этого необходимо сделать разметку блока на CSS Flexbox.
Например, так:

 

В этом примере ширина центрального блока будет 300px, а крайние — будут делить оставшуюся ширину.
20.07.2017, 17:58

Спасибо!
Это так же полезно знать, но это не совсем то, задача такая. В среднем блоке элементы, форма с инпутами и кнопками. Необходимо что бы крайние элементы при определенном уменьшении экрана пропадали (пробую через сетку бутсрапа с помощью hidden), а средний блок всегда оставаясь в центре уменьшался незначительно, не сильно искажая форму внутри. Но если задать бекграунд картинку в див блоке, то она тянется вместе со всеми блоками.

20.07.2017, 18:59
Что-то типа такого:

 

11.04.2017, 09:56

Здравствуйте.
Расскажите пожалуйста про адаптивные изображения на основе клиентских подсказок (Client Hints). В сети про эту технологию мало информации. Хотелось бы более подробно про это узнать. Спасибо.

Александр Мальцев
12.04.2017, 07:40

Смысл данной технологии (Client Hints) заключается в том, чтобы послать серверу в составе запросов для получения изображений дополнительную информацию (DPR, Width, Viewport-Width — т.е. плотность пикселей экрана, его ширину и ширину viewport). Добавляется Client Hints в браузер легко посредством вставки в раздел head следующего тега:

После этого браузер в заголовочную информацию запроса для каждой картинки будет включать эти данные. Но это действие пока делает только браузер Chrome.

Самое сложное — это сервер. Получив такой запрос на сервере, вы должны его как-то обработать. Иначе в Client Hints не будет смысла. Т.е. необходимо написать серверный скрипт, который например, будет искать подходящую картинку по этим параметрам, и отдавать её клиенту (браузеру). А если картинки с нужными параметрами нет, то, например, её генерировать из исходного файла.

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

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

03.02.2017, 07:19

Александр, спасибо за ресурс!
Вопрос по картинкам — у меня есть CMS, которая генерирует контент страницы, в т.ч. картинки. Там в форме редактора можно задавать для картинки класс. Можно ли как-то через это заставить картинку открываться красиво по типу lightbox? Bootstrap подключен, и разметка сайта на нем сделана.
Сейчас как раз использую lightbox, но это не подходит, т.к. надо вручную весь сгенерированный текст дополнять в тегах картинки свойствами типа:

data-lightbox="pic"

Александр Мальцев
03.02.2017, 16:42

Спасибо, за отзыв. Попробуйте добавить после загрузки страницы, ко всем картинкам имеющим класс pic, атрибут data-lightbox.

  

Выровнять две картинки по центру (bootstrap)

Никак не получается выровнять по центру (горизонтали) две картинки на странице
Они немного смещены влево. Может это из-за того что для блока должно быть 1200 px , а в реальности 1135 px?
Вот этот скрипт я вставил в материал с картинками:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
p style="text-align: center;"> span style="font-size:16px;">e-mail: st.art.design@ukr.net span>p> p style="text-align: center;"> span style="font-size:16px;">span style="display:block">span style="font-size:12pt;line-height:14pt">instagram a href="https://www.instagram.com/st.art.designstudio">@st.art.designstudioa>span>span>span>p> p style="text-align: center;"> span style="font-size:16px;">a href="https://www.facebook.com/st.ARTdesignstudio" target="_blank"> img alt="" src="share42/icons.png" style="width: 16px; height: 16px; bottom: 2px;" />a>  a href="https://www.facebook.com/st.ARTdesignstudio" target="_blank">facebook.com/st.ARTdesignstudioa>strong> strong> span>p> p style="text-align: center;">  p> style type="text/css"> .l1 { position: relative; /* Относительное позиционирование */ height: 280px; /* Высота блока */ width: 420px; margin-left: auto; margin-right: auto; } .l2 { display: block; position: absolute; /* Абсолютное позиционирование */ /* Положение от правого края */ /*line-height: 1px;*/ color: #ddd; font-size: x-large; margin-left: auto; margin-right: auto; } .l2-l{ float:left; right: 25px; } .l2-r{ float:right; left: 25px; } .a1{ bottom: 25%; /* Положение от нижнего края */ } .a2{ bottom: 10%; /* Положение от нижнего края */ }style> div class="row"> div class="span1">  div> div class="span5"> div class="l1"> p style="text-align: center;"> img alt="" src="https://www.cyberforum.ru/images/cont_valer.jpg" style="width: 420px; height: 280px; margin: 2px; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);" />p> div class="l2 l2-l a1" style="text-align: center;"> Коваль Валерияdiv> div class="l2 l2-l a2" style="font-size: 20px;"> +38 099 265 28 67div> div> div> div class="span5" style="text-align: center;"> div class="l1"> p> img alt="" src="https://www.cyberforum.ru/images/cont_ira.jpg" style="width: 420px; height: 280px; margin: 2px; box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);" />p> div class="l2 l2-r a1" style="color: #000; "> Абрамова Иринаdiv> div class="l2 l2-r a2" style="color: #000; font-size: 20px;"> +38 099 521 82 61div> div> div> div class="span1">  div> div>

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

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