Как разместить абсолютный родительский div в центре - PullRequest
0 голосов
/ 23 марта 2020

Надеюсь, у тебя все хорошо! У меня проблемы с центрированием родительского div, в то время как его позиция абсолютна. Я также не хочу, чтобы содержимое родительского div перемещалось после увеличения / уменьшения масштаба. В этом коде поля не выдвигаются, но текст есть, если вы можете помочь мне исправить это тоже. Для ясности просьбы: 1. Центрировать абсолютный родительский элемент div, 2. Текст, оставшийся внутри прямоугольников при увеличении / уменьшении.

.services {
    display: flex;
    height: 70vh;
    width: 90%;
    margin: auto;
    align-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
    position: absolute;
    background-color: lightcoral;
}

.qm {
    height: 60%;
    background: #fcfcfc;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    padding: 0 1rem;
    width: 18%;
    position: relative;
}

.audit {
    height: 60%;
    background: #fcfcfc;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 18%;
    position: relative;
}

.pm {
    height: 60%;
    background: #fcfcfc;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 18%;
    position: relative;
}

.qm h1 {
    color: #3C3664;
    font-weight: 600;
    font-size: 28px;
}

.audit h1 {
    color: #3C3664;
    font-weight: 600;
    font-size: 28px;
}

.pm h1 {
    color: #3C3664;
    font-weight: 600;
    font-size: 28px
}
<div class="services">
            <!-- Quality Management -->
            <div class="qm">
                <h1>
                    Quality Management
                </h1>
                <img src="./img/qmvector.svg" alt="">
            </div>
            <!-- Auditing -->
            <div class="audit">
                <h1>
                    Auditing
                </h1>
                <img src="./img/auditvector.svg" alt="">
            </div>
            <!-- Project Management -->
            <div class="pm">
                <h1>
                    Project Management
                </h1>
                <img src="./img/pmvector.svg" alt="">
            </div>
        </div>

Я раскрасил родительский элемент div, чтобы вы могли четко видеть его положение. enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...