-1

I'm trying to center the text in a div. With the display: flex, everything overlaps. I want to set h1, h2, p one by one (column) but no change padding-button. Someone will help?

.wrapper{  
    width: 50%;
    padding-bottom: 50%;
    border: 1px solid black;
    position: relative;
}

h1, h2, p{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;   
}
<body>
    <div class="wrapper">
        <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, temporibus.</h1>
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit</p>
    </div>
</body>
Ania
  • 1

1 Answers1

2

Your issue was that position absolute. That was causing the overlap here is a minimal reproduceable working example you can take and edit as needed.

.wrapper{  
    width: 50%;
    border: 1px solid black;
    position: relative;
    height: 700px;
    display: flex;
    align-items: center;   
    justify-content: center;
    flex-direction: column;
}

h1, h2, p{
    text-align: center;
}
<body>
    <div class="wrapper">
        <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, temporibus.</h1>
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit</p>
    </div>
</body>
OMGDrAcula
  • 1,054
  • 3
  • 11
  • 17
  • Exactly the same effect but without removing the padding-bottom. I want the height of divs to always be equal to the width – Ania Aug 17 '22 at 19:36
  • @Ania remove the padding and add `aspect-ratio: 1` – Temani Afif Aug 17 '22 at 19:42
  • You can just take my snippet and remove the height I set and change it to what you need! The best way to ensure height is equal to width would be to set strict values for each. But you can mess with it how you want and the h1, h2, and p should stay centered! – OMGDrAcula Aug 17 '22 at 19:43
  • @Ania Glad everything is sorted out! – OMGDrAcula Aug 17 '22 at 20:04