Блог

Главная - Вопросы по программированию - Сделайте так, чтобы div не двигался при изменении размера

Сделайте так, чтобы div не двигался при изменении размера

#css

Вопрос:

 .maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    padding-left: 290px;

    margin-left: auto;
    margin-top: 30px;
} 
 <div class="maindiv"></div>

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

Я пытался right: 50%; left: 50%; , но div, похоже, застрял на противоположной стороне окна.

Я тоже так сделал, position: absolute; но это ничего не дало.

Код:

 .maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    padding-left: 290px;

    margin-left: auto;
    margin-top: 30px;
}

Ответ №1:

Просто добавьте margin-right: auto в класс .maindiv

Ответ №2:

попробуйте использовать это

 .maindiv {
        width: 250px;
        min-height: 300px;
        background-color: #f5ba13;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
        border-radius: 35px;
        padding-left: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: auto;
        margin-top: 30px;
    }
Метки: ,