Блог

Главная - Вопросы по программированию - Поля и отступы сворачиваются

Поля и отступы сворачиваются

#css #flexbox

#css #flexbox

Вопрос:

Я использую Google Chrome (93.0.4577.82), и у меня возникла проблема с полями и отступами div. Вкратце:

  1. Отступ отступ — смещен от центра
  2. Просто отступы — не по центру
  3. Просто смещение полей от центра
  4. Ни один из них не центрирован

Предполагается, что div должен быть идеально центрирован на странице. Вот скриншот с обоими отступами поля:

Отступ поле

И вот один из них без полей и отступов:

Нет полей или отступов

Проблема явно в том, что есть поле отступ. Вот стили div:

     display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid #85aeed;
    border-radius: 15px;
    width: 100%;
    padding: 2em;
    margin: 1em;
    opacity: 0.9;
    transition: 0.7s;
    color: #333;

Согласно DevTools в Chrome, нет никаких переопределяющих стилей.

Посмотреть веб-сайт: https://github-user-search-development.dillonb07.repl.co/Search затем для пользователя вы можете просмотреть карту, которая находится не по центру

Если кто-нибудь знает, что происходит, пожалуйста, оставьте ответ или комментарий ниже!

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

1. Просто сообщаю вам … на веб-сайте ошибка сервера при поиске, поэтому я не смог просмотреть div. Чтобы попытаться решить вашу проблему… Вы можете попробовать добавить justify-content: center; . Это может решить проблему. Выравнивание содержимого по центру должно выровнять элементы по центру экрана по горизонтали. Выравнивание элементов по центру выравнивает элементы по вертикали.

2. Спасибо, я не получал ошибку. Я предполагаю, что мой браузер был кэширован! Я постараюсь это исправить. В настоящее время у меня есть justify-content: center; и align-items: center; применяется к родительскому div, и это не помогает. Тем не менее, я обнаружил проблему с width: 100%;

Ответ №1:

Ваш .user div помещается внутри <a> тега.

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

Конечно, есть много способов это исправить, но вот несколько предложений:

  • Удалить width: 100% из .user div
  • Замените поля .user div заполнением родительского <a> тега.

Ответ №2:

вы можете использовать другой div, вложенный в ваш родительский div элемент… и назначьте следующие коды вашему родительскому div 

  display: flex;
 flex-direction: column;
 justify-content: center

после этого используйте другие стили для вложенных div . (напишите padding для этого div )

Метки: