Text not centered with justify-content: center

by

The HTML structure of a flex container has three levels:

  • the container
  • the item
  • the content

Each level represents a separate, independent element.

The justify-content property, which is set on flex containers, controls flex items. It has no direct control over the children of the item (the text, in this case).

When you set justify-content: center on a row-direction container the item shrinks to the content width (i.e., shrink-to-fit) and is horizontally centered. The content, being inside the item, goes along for the ride.

Everything is centered nicely, when the content is narrower than the flex container.

On the other hand, when the content is wider than the flex container, the flex item can no longer be centered. In fact, the item cannot be aligned at all (start, end, center) because there is no free space – the item is consuming the full width of the container.

In such cases, the text can wrap. But justify-content: center doesn’t apply to the text. It never did. The text was always subject to the default text-align: start (left in LTR / right in RTL).

Therefore, to center the text directly, add text-align: center to the flex item (or the flex container, it doesn’t really matter due to inheritance).

article {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}

/* demo styles only */
article {
  width: 100px;
  height: 100px;
  margin: 10px;  
  background-color: lightgreen;
}
<article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article>

More Related Contents:

  1. Center one and right/left align other flexbox element
  2. How do I keep two side-by-side div elements the same height?
  3. How to disable equal height columns in Flexbox?
  4. Proper use of flex properties when nesting flex containers
  5. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  6. Remove space (gaps) between multiple lines of flex items when they wrap
  7. Flexbox: 4 items per row
  8. Equal height columns with CSS
  9. Absolutely positioned flex item is not removed from the normal flow in IE11
  10. Make flex items take content width, not width of parent container
  11. Using flex order property to re-arrange items for desktop and mobile views
  12. Flexbox fill available space vertically
  13. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  14. Equal space between flex items
  15. How can I make a display:flex container expand horizontally with its wrapped contents?
  16. flex-grow not working in column layout
  17. CSS – How to have children in different parents the same height?
  18. How to center-align one flex item and right-align another using Flexbox [duplicate]
  19. Height of flex container not working properly in Safari
  20. Why is there vertical scroll on the main container?
  21. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  22. How can I create a row-based masonry layout using CSS?
  23. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  24. How do I make flex box work in safari?
  25. Zebra striping a flexbox table with wrapping items
  26. Element with “display: inline-flex” has a strange top margin
  27. Pin a flex item to the bottom of the container
  28. display: flex not working on Internet Explorer [duplicate]
  29. Flex items create space between them when they wrap [duplicate]
  30. Fitting child into parent

Leave a Comment