vertical align text in two different div's inside another div

Question

I am trying to vertical align text inside two div's. I have tried a number of solutions found here but none produce the required result.

I have crated a sjFiddle:

#outer {
  position: relative;
}

#inner1 {
  position: absolute;
  align-items: center;
  top: 10%;
  bottom: 10%;
  width: 100%;
  height: 40%;
}

#inner2 {
  position: absolute;
  align-items: center;
  top: 50%;
  bottom: 10%;
  width: 100%;
  height: 40%;
}

html,
body {
  height: 100%;
}

#outer {
  background-color: purple;
  width: 50%;
  height: 50%;
}

#inner1 {
  background-color: yellow;
}

#inner2 {
  background-color: red;
}

<div id="outer">
  <div id="inner1">
    Test text 1
  </div>
  <div id="inner2">
    Test text 1
  </div>
</div>

Can anyone see how I can do this based on the code in my fiddle. Many thanks in advance for your time.

https://jsfiddle.net/6t0pjgwz/ – Michael Benjamin Nov 18 '17 at 15:28 — Michael Benjamin, Nov 18 '17 at 15:28

score 2 · Accepted Answer · answered Nov 18 '17 at 15:01

Is this similar to what you are trying to achieve?

#outer {
    height:100%;
    padding:10% 0;
    box-sizing:border-box;
}

#inner1 {
  height:50%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}


#inner2 {
  height:50%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

html, body { height: 100%; }
#outer {
    background-color: purple;
}
#inner1 {
    background-color: yellow;
}

#inner2 {
    background-color: red;
}

<div id="outer">
    <div id="inner1">
         Test text 1
     </div>
     <div id="inner2">
         Test text 1
    </div>
</div>

I have removed the positioning from the inner divs and made them flexboxes, thus allowing us to use justify-content and align-items to achieve horizontal and vertical centering.

vertical align text in two different div's inside another div

1 Answers1