Надеюсь, у тебя все хорошо! У меня проблемы с центрированием родительского 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, чтобы вы могли четко видеть его положение.