Почему "margin: 0 auto" удаляет пробел в моем div? Как я могу центрировать div с помощью пробела?

#html #css #flexbox #margin

#HTML #css #flexbox #margin

Вопрос:

Я довольно долго занимался этой проблемой и не знаю, что делать.

Это мой первый вопрос о переполнении стека, будьте осторожны, лол.

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

https://i.stack.imgur.com/TvPOF.jpg

Если я дам div поле «0 auto», он удалит пробел, который находится с правой стороны div, почему он это делает? Вот результат:

https://i.imgur.com/5lOc4Oq.png

Как я должен центрировать div, я подхожу к проблеме под неправильным углом?

Вот соответствующий код:

HTML:

 <div class="header-bg">
    <div class="width">
        <div class="width2">
            <p class="header-title"><span class="gold-text">CAN’T HURT ME:</span> MASTER YOUR MIND AND DEFY THE ODDS</p>
            <p class="header-text">Can’t Hurt Me: Master Your Mind and Defy the Odds chronicles David Goggins’ incredible life from perpetual victim to active duty Navy SEAL to world class ultra athlete and world record holder. <a href="http://geni.us/canthurtme" target="_blank">Now available at these fine retailers</a>.<p>
        </div>
                
        <div class="buttons width2">
            <div class="button-1">
                <p>Buy the Book</p>
            </div>
            <div class="button-2">
                <p>About David</p>
        </div>
    </div>
</div>

CSS:

 .width {
    max-width: 1000px;
}

.width2 {
    max-width: 500px;
}

.header-bg {
    background: black url('../img/header.jpg') no-repeat center / cover;
    height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.buttons {
    margin-top: 50px;
    display: inline-flex;
}

1. @Dexterians потрясающе, это работает! Спасибо за ваш ответ и, самое главное, за объяснение!

2. Привет @ffrg — я перевел это в ответ. Если вы удовлетворены, пожалуйста, отметьте мой ответ как ответ 🙂

Ответ №1:

Какой элемент вы применяете margin: 0 auto ?

Я думаю, что ваша max-width проблема с этими разделами является причиной вашей проблемы. Добавить min-width или просто установить width значение MAX-WIDTH означает, что оно может быть от 0px до 1000px (например) в зависимости от размера экрана… итак, если ваш экран имеет ширину всего 400 пикселей, он будет шириной 400 пикселей. Если ваш экран имеет размер 1200 пикселей, div будет заблокирован на 1000 пикселей — в основном, когда вы применяете свое поле; поле уменьшает ваше поле, удаляя пробелы (поскольку это не нарушает max-width правило из-за отсутствия min-width установленного правила).

TLDR; измените max-width на этих divs, чтобы просто быть width , и вы могли бы увидеть, что это будет лучше для того, что вам нужно.