1

Im trying to get the text in the middle of the flexboxes so the big box h4 and p is centered to its box, as well as the text in the two smaller boxes are in the middle of their boxes. Greatful for every help.

body {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.equal-height-container {
 margin: 0 auto;
 display: flex;
 height: 100vh;
}
 

.first {
 background-color: #fff;
 padding: 20px;
 flex: 1;
 }
  


.second {
 background-color: yellow;
 flex: 1;
 display: flex;
 flex-direction: column;
}



.second-a {
 background-color: #c0dbe2;
 flex: 1;
 padding: 20px;
}


.second-b {
 background-color: honeydew;
 flex: 1;
 padding: 20px;
}
<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem           ipsum har            varit standard ända sedan 1500-talet,</p>
    </div>
  </div>
Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
bboogie
  • 13
  • 5

2 Answers2

1

Use align-items: center & justify-content: center.

Also make your .first, .second-a & .second-b and apply the flex alignment property in these as well. Like:

.equal-height-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.first, .second-a, .second-b {
    display: flex;
    align-items: center;
}

Have a look at the snippet below:

body {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
  margin: 0;
}

.equal-height-container {
 margin: 0 auto;
 display: flex;
  align-items: center;
  justify-content: center;
 height: 100vh;
}
 

.first {
 background-color: #fff;
 padding: 20px;
 flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 40px);
 }
  


.second {
 background-color: yellow;
 flex: 1;
 display: flex;
  flex-direction: column;
  height: 100vh;
}



.second-a {
 background-color: #c0dbe2;
 flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 20px);
 padding: 20px;
}


.second-b {
 background-color: honeydew;
 flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 20px);
 padding: 20px;
}

h4 {
  margin-bottom: 0;
}
<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem           ipsum har            varit standard ända sedan 1500-talet,</p>
    </div>
  </div>

Hope this helps!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
  • Sadly no. This just makes the boxes be in the middle of the screen. If you look at the full screen result. I wanted to keep the full size of the boxes. Thnx for helping though. – bboogie Dec 22 '16 at 15:25
  • 1
    @bboogie Updated the code snippet in my answer. Please have a look. I've made `.first`, `.second-a` & `.second-b` a flex container & applied the flex alignment properties. Let me know if this helps. – Saurav Rastogi Dec 22 '16 at 15:32
  • Saurav Rastogi! Thank you, exactly like that. Saved my day! – bboogie Dec 22 '16 at 15:43
  • I will. Is it possible to get the text in the middle of the boxes without centering the text? So you could have left aligned text but its till in the pure middle of the box? – bboogie Dec 22 '16 at 15:48
  • @bboogie For that you need to apply a certain width to all your boxes. And then apply `margin: 0 auto;` – Saurav Rastogi Dec 22 '16 at 15:53
  • Thnx. I applied the changes and it works, except from one thing. On my gulp build the h4 comes side by side with the paragraph. – bboogie Dec 22 '16 at 16:45
  • @bboogie Maybe there is some overwrites at the time of gulp. If possible can you show me the exact result that you are getting by hosting the it somewhere? – Saurav Rastogi Dec 22 '16 at 16:50
  • @bboogie Its because in the CSS all the three divs `.first`, `.second-a` & `.second-b` are rendering wrong css syntax like - `display-flex-direction`, but they should render it like `flex-direction`. See your inspect element & have a look. – Saurav Rastogi Dec 22 '16 at 18:43
0

Add text-align: center; to .equal-height-container > div

Where > means the immediate child

body {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.equal-height-container {
 margin: 0 auto;
 display: flex;
 height: 100vh;
}
.equal-height-container >  div {
 text-align: center;
}
     

.first {
 background-color: #fff;
 padding: 20px;
 flex: 1;
 }
  


.second {
 background-color: yellow;
 flex: 1;
 display: flex;
 flex-direction: column;
}



.second-a {
 background-color: #c0dbe2;
 flex: 1;
 padding: 20px;
}


.second-b {
 background-color: honeydew;
 flex: 1;
 padding: 20px;
}
<div class="equal-height-container">
  <div class="first">
    <h4>Feature1</h4>
    <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet.</p>
  </div>
  <div class="second">
    <div class="second-a">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit                standard ända sedan 1500-talet,</p>
    </div>
    <div class="second-b">
      <h4>Feature1</h4>
      <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem           ipsum har            varit standard ända sedan 1500-talet,</p>
    </div>
  </div>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55
  • I might phrased the problem wrong. I ment vertical and horizontal center of the boxes. So its till full screen but just the text in them are hozitonal and vertically in the middle. – bboogie Dec 22 '16 at 15:30