0

I have 3 elements in a div, I want them to be in a block (vertical) and be aligned horizontally and vertically. Here is how it looks right now:

enter image description here

Here is my code:

<div className="parent">
        <p className="heading">TITLE</p>
        <p className="description"><strong>DISCLAIMER</strong>: The site contains offensive, vulgar langauge which may not be<br/>suitable for many, so enter with caution and do not reveal any personal details</p>
        <Link to="/school"><button className="enterButton">enter the website</button></Link>
    </div>

----------------------
stylesheet.css
----------------------
.parent {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .heading {
    font-size: 76px;
    text-align: center;
  }

  .description {
    font-size: 18px;
    opacity: .7;
    text-align: center;
    line-height: 26px;
  }

  .enterButton {
      width: 360px;
      height: 100px;
      background-color: #E1E8ED;
      color: #15202B;
      font-size: 32px;
      font-weight: bolder;
      text-align: center;
      border: none
  }

I want them align and below each other like:

TITLE
Disclaimer
Enter the website
Shlok Jain
  • 343
  • 8
  • 17

1 Answers1

1

Flex-direction column to set up the alignment of your elements within the flex parent element. You already have the center alignment both axis with align-items: center and justify-content: center.

.parent {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

Will do the trick...

dale landry
  • 7,831
  • 2
  • 16
  • 28
  • yep, this works – Shlok Jain May 08 '21 at 04:15
  • hey, if I add `flex-direction: column` the code works fine but I have other pages in my website which are affected by it. For example one of the pages is a `display: grid`, spread out horizontally but suddenly they are vertical and below each other. Is there something I can do? – Shlok Jain May 08 '21 at 05:38
  • So sounds like you have multiple pages that use that same `.parent` class and changing that specific selector causes issues with other pages. Create a unique class for the `.parent` element that has the flex code you want for that page and add it to that element and your CSS page. – dale landry May 08 '21 at 05:42
  • works! thanks a lot! – Shlok Jain May 08 '21 at 05:51