Centering text vertically and horizontally in a flex item

Question

I was trying to follow along the flexbox example and my line-height is not working for this problem.

The text should be vertically centered, but it's not. It remains at the top only horizontally centered.

In the code snippet it seems to work fine but just to prove that this is acting strange I will give a picture of what I am seeing.

I tested this in both Chrome and IE but it's not vertically centering.

I did change the sizes in the snippet, but I don't think that'd do it.

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  margin-top: 10px line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

Sorry.... I want the text to be centered vertically and horizontally :/ I was just trying to use line-height to achieve that But the other guy answered it already — Shinji-san, Jun 26 '16 at 01:49
@Shinji-san, does it have to be centered with `line-height`? Since you're using flexbox, there are flex properties that can center vertically and horizontally. — Michael Benjamin, Jun 26 '16 at 02:00
@Michael_B I was just merely following the example. But now that you mention it, how would you do that, because the items are the children of flexboxes, but the text in the children aren't flex-items though, so, not sure which property I would use. — Shinji-san, Jun 26 '16 at 02:05
Flex items can also be flex containers. You can apply flex properties to an element by making the parent a flex container. See my answer. Also see this post: http://stackoverflow.com/a/37844240/3597276 — Michael Benjamin, Jun 26 '16 at 02:07
In that comment you mean 'descendant' as in, in this case, the child of 'flex-item' right? Like a child of flex-item in this case wouldn't be able to access flex properties, but the 'flex-item' could? — Shinji-san, Jun 26 '16 at 02:10
Descendants of a flex container beyond the children do not accept flex properties. Here's [**a more complete explanation**](http://stackoverflow.com/a/37844240/3597276). Also, here's more on [**flex centering**](http://stackoverflow.com/a/33049198/3597276). — Michael Benjamin, Jul 11 '16 at 04:05

score 4 · Accepted Answer · edited May 23 '17 at 11:46

To vertically and horizontally center the text in each flex item, make this adjustment to your code:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
}
.flex-item {
  display: flex;                /* create nested flex container */
  justify-content: center;      /* center text horizontally */
  align-items: center;          /* center text vertically */
  background: tomato;
  padding: 5px;
  width: 50px;
  height: 50px;
  color: white;
  font-weight: bold;
  font-size: 3em;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

For more details see: Flexbox: center horizontally and vertically

score 0 · Answer 2 · answered Jun 26 '16 at 02:30

0

You missed a ";" after margin-top in flex-item, which make the line-height inactive

answered Jun 26 '16 at 02:30

garyx

609
7
19

Centering text vertically and horizontally in a flex item

2 Answers2