Как выровнять блок по центру: Выравниваем блок по центру страницы / Хабр

html — Центральный блок Bootstrap 4 не может центрироваться

Задавать вопрос

спросил 6 лет, 10 месяцев назад

Изменено 4 года, 7 месяцев назад

Просмотрено 74к раз

У меня есть следующий HTML-код начальной загрузки (это JSX, следовательно, className , но идея та же):

 

        Временная шкала
        Календарь
 
 
 

Я пытаюсь центрировать этот код либо с помощью центрального блока начальной загрузки, либо с помощью CSS, но не могу заставить его работать:

Зеленая полоса выделяет div toggleView .

Единственный CSS, который я использую, это следующее:

 .toggleView {
    отступ: 20 пикселей;
}
 

Почему я не могу центрировать эту группу кнопок?

• html
• css
• twitter-bootstrap
• bootstrap-4

btn-group имеет display:inline-block , поэтому вы должны использовать text-center в родительском контейнере.

http://codeply.com/go/hyUYkUrtRN

ПРИМЕЧАНИЕ. теперь mx-auto , представляющий margin: 0 auto; для центрирования display:block элементов. Bootstrap 4 теперь также имеет класс d-block , поэтому встроенный элемент можно сделать display:block следующим образом..

См. также: Центрировать содержимое внутри столбца в Bootstrap 4

4

Bootstrap 4 (по состоянию на 16 августа 2017 г.) будет использовать d-block , а для центрирования вы используете mx-auto .

1

Bootstrap 4 не имеет center-block Вместо этого я использую d-block mx-auto , который устанавливает для отображения блокировку, а для левого и правого полей — авто.

2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Решено: Re: Выровнять по центру с блоком

‎13. 02.2021 22:23

@Klubo555 

Добавьте следующий код в конец файла assets/theme.css.

 .template-page .rte{
максимальная ширина: 65ч;
поле: 0 авто;
} 

 

Надеюсь, это поможет.

Спасибо!

Если полезно, пожалуйста Нравится и Принять решение | Электронная почта: [email protected] | Instagram: @dmw.webartisan
Проверьте здесь Приложение PageFly для персонализации ваших страниц

| Приложение №1 для фильтрации и поиска товаров на Shopify | Самое мощное приложение для создания страниц Shopify

1036 просмотров

1 Нравиться

Отчет

‎14.02.2021 05:23

Этот код работает, но для всех пользовательских страниц. Я пытаюсь понять код и создал новый, но изменил его со страницы на page.alternate, имя внутри кода — page.alternate.liquid. Я думал,

, что .template-page.alternate может работать, но id не работает.

Какой код работает только для этой конкретной страницы (https://four-leggedpets. com/pages/policy-for-covid-19)?

Спасибо

1017 просмотров

1 Нравиться

Отчет

‎14.02.2021 05:38

@Klubo555 

Тогда что касается страницы-шаблона. Нам нужно будет поместить id с тегом body.

Layout/theme.liquid

 

Найти

заменить на

90 016

 

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

 

Если полезно, пожалуйста Нравится и Принять решение | Электронная почта: [email protected] | Instagram: @dmw.webartisan
Проверьте здесь Приложение PageFly для персонализации ваших страниц | Приложение №1 для фильтрации и поиска товаров на Shopify | Самое мощное приложение для создания страниц Shopify

1,013 просмотров

1 Нравиться

Отчет

‎14.