Non-centered Text with justify-content: center

In a flex container, the justify-content property centers flex items horizontally, but it has no direct control over the text within those items. When the text wraps within the item, it retains its default text-align: start value, resulting in non-centered text.

The flex container, flex items, and text represent three distinct levels in the HTML structure. justify-content affects flex items, not the text contained within them.

If the flex item fills the width of its container, it cannot be centered, hence the misaligned text upon wrapping.

To center the text directly, assign text-align: center to the flex item or container through inheritance.

Example

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}

  
some long text here



  
some long text here