When flexbox is set to align and justify all items as center, why is the text not centered?

Question

I'm new to flexbox. My goal with the code is to vertically and horizontally center the text in the container div.

Why isn't the text being center aligned? Do I need to add a text-align:center? Shouldn't flexbox be doing that for me?

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
</div>
</div>

mindlis · Answer 1 · 2018-02-11T02:51:13.473

1

You're setting flex on the .container, whose only child is .content, which is centered.

Applying text-align: center should align the text within that div to the center.

The divs inside .content are still block level elements with text aligned to the left. Setting flex on a container won't affect children of children.

Borders and backgrounds added for clarity.

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  background-color: blue;
  padding: 24px;
}

.content > div {
  border: 1px solid red;
  background-color: pink;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
  </div>
</div>

edited Feb 11 '18 at 02:51

answered Feb 11 '18 at 02:42

mindlis

1,546
11
17

my question is do I need to specifically apply "text-align" shouldn't flex-box center, center the text? Or when centering text with flexbox, do you also have to use text-align: center? To fully center the text? – AnnaSm Feb 11 '18 at 02:43
Added a snippet to the answer to try and illustrate more. Does that help explain why you still need to specify text alignment? – mindlis Feb 11 '18 at 02:56

Peeper · Answer 2 · 2018-02-11T03:00:08.303

Flexbox is doing its job here. You have text-align set to the default, left. If you want it centered, then yes you will have to use text-align: center; on the div that contains the text you want centered.

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
  text-align: center;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
</div>
</div>

Bhuwan · Answer 3 · 2018-02-11T03:05:15.693

Flex properties only works on flex row and flex items not to inner elements of flex items.

Here your flex container is .container and flex item is .content...align-items: center and justify-content: center will only work on flex-items.

You will need to use text-align:center to align the text in center

Stack Snippet

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
  text-align: center;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
  </div>
</div>

Another solution is to apply the display:flex to the .content with align-items:center...you will understand the concept of flex...

Stack Snippet

.container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}

.content {
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

<div class="container">
  <div class="content">
    <div>Some text here and here and here...</div>
    <div>a little less text...</div>
  </div>
</div>

When flexbox is set to align and justify all items as center, why is the text not centered?

3 Answers3