How to align text in middle (vertically)

Question

I am struggling with this many hours now and still I can't find a solution. I've made this nice grid that adjusts with text length and browser resising. The problem now is that I can't get text go the middle of the box.

I've tried everything.. I used several properties in order to achieve this but nothing worked.

text-align: center;
vertical-align: middle;
line-height: "same as div";

The css code:

.parent {
  text-align:center;
  margin:0px;
  width:100%;
  padding:0px;
  font-size:18px;
  color:#000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.child {
  padding:18px 25px;
  background: rgba(0, 0, 0, .5);
  list-style-type:none;
  width:inherit;
  margin:5px;

}

Quick and simple: Center vertically with flexbox - http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Dec 18 '15 at 02:07

score 5 · Accepted Answer · edited Dec 18 '15 at 00:50

Is this what you want?

.parent {
    text-align:center;
    margin:0px;
    width:100%;
    padding:0px;
    font-size:18px;
    color:#000;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;

}

.child {
    position: relative;
    background: rgba(0, 0, 0, .5);
    padding:10px;
    list-style-type:none;
    width:inherit;
    align-items: center;
    justify-content: center;
    height:inherit;
    display: inline-flex;
    vertical-align: middle;
    margin:5px;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="parent">
    <div class="child"><span>sometext</span></div>
    <div class="child">somemoretext somemoretext</div>
    <div class="child">sometext</div>
    <div class="child">sometext</div>
</div>
<div class="parent">
    <div class="child">somemoretext somemoretext somemoretext somemoretext</div>
    <div class="child">sometext</div>
</div>
</body>
</html>

this is done with flex as ur jsfiddle. u can do it also easier with "parent display table and vertical align middle" and "child display table cell and van middle" removing ur flex styles.

Seems pretty good!! May I ask if this will work in most browsers ? :) Thank you so much for your input :) — justme, Dec 18 '15 at 00:36
u can check [here](http://caniuse.com/#search=flex) for the css compatibility! my opinion is tha flex is supported on many browsers and frameworks and i think its safe to use.. your rest css seems ok. — Vinc, Dec 18 '15 at 00:48

Clemens Himmer · Answer 2 · 2015-12-18T00:39:55.210

If you do not care that divs with multiple lines of text adjust their height to actual text content, use height:100% on your child elements.

If you need all your content to stay the same height, add

// Use any fixed value
    line-height: 50px;
    height: 50px;

If you need to change your fixed height in pixels whenver your window is resized, just use javascript to change the CSS rule (if using this method read this first to not slow down your client when the window gets changed).

score 1 · Answer 3 · answered Dec 17 '15 at 23:56

1

Have you tried:

margin:0 auto;

answered Dec 17 '15 at 23:56

leham789

117
2
12

can you post the html for what your aligning so i can try for myself please? – leham789 Dec 17 '15 at 23:59
on this link, the text is in the middle of the box?! – leham789 Dec 18 '15 at 00:05
In the link I've added a second text in one box causing the rest boxes to increase their height. As a result the text in the other boxes stayed on the top and it didn't go in the middle so I am trying to figure out something but I am out of thoughts. – justme Dec 18 '15 at 00:07

How to align text in middle (vertically)

3 Answers3