CODEWITHSUNDEEP
htmlcssflexbox
user3550879
user3550879

Reputation: 3469

need items to stack while using flex

I have a child div centered vert and horiz inside its parent with content inside centered as well using flex. However, The content and h2 stay side by side centered, I want them to stack.

.jumbotron {
  position: relative;
  min-height: 600px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
#s-text {
  text-align: center;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
#s-text h2 {
  color: #fff;
  margin-bottom: 20px;
  padding: 0;
}
<div class="jumbotron" style="...">
  <div id="s-text">
    <h2> the_secondary_title </h2>	
    <p>multiple lines of content ...</p>
  </div>
</div>

Upvotes: 0

Views: 31

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39382

Use flex-direction: column;

.jumbotron { 
  position: relative;
  min-height: 400px; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0; padding: 0;
}

#s-text { 
  text-align: center;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}

#s-text h2 {
  color: #000;
  margin-bottom: 20px; padding: 0;
}
<div class="jumbotron" style="...">
    <div id="s-text">
        <h2> Heading </h2>              
        <p>multiple lines of content ...</p>    
    </div>
</div>

Upvotes: 3

Related Questions