Text Not Centered with Justify-Content: Center

Text not centered with justify-content: center

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>

Flex items are not centering with justify-content but centered with text-align?

justify-content defines the alignment along the main axis (in your case column. So you are centering the content within its row.

It also works only for the direct decendents of the flex container (in this case the div elements that are direct children of the form. If you change justify-content to align-items (which works for the cross-axis) then this should center the div elements horizontally, and then you can add the css to align the label and input elements within those divs.

There's a really good guide available for the properties of flex-box and what they affect here.

.container {
  width: 100vw;
}
.container form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container form input {
  width: 80%;
}

problem with justify-content:center; in flexbox

In your CSS for the main identifier, you have flex-direction: column; so you need align-items: center;, not justify-content: center;. Also, I love this resource on Flexbox.

align-items is used for the "cross axis" (if you're adding elements in the column flex direction, the cross axis is the horizontal, and you want your stuff centered horizontally; justify-contents follows the direction axis so it would be trying to center things vertically).

Here's the updated chunk of code in question:

/* ... other styles were above ... */
main {
  text-align: center;
  background: white;
  padding: 2em auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* don't need this */
  align-items: center;
}
/* ... there's more stuff below ... */

Text not aligning in center

I added another flex container to the column, so alignment can be controlled further into the HTML nesting. I also justified the content of the column to center. I also made the h1 display inline-flex to remove all extra white-space.

Here is where all the classes have been added:

<div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center">
  <h1 class="verticalOption d-inline-flex m-0">
    <a href="#">Sample Text</a>
  </h1>
</div>

Demo

body{    margin:0;    padding: 0;    height: 100vh;    width: 100vw;}.forAll{    height: 100vh;    display: flex;    justfiy-content: center;    align-items: center;    text-align: center;    padding: 0;}.verticalOption{    transform: rotate(270deg);    line-height: 10px;}.verticalOption a{    text-decoration: none;    color: white;    font-size: 10px;    line-height: 5px;    width: 200px;    white-space: nowrap;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><body>    <div class="no-gutters">        <div class="fluid-container d-flex flex-row-reverse">            <div class="container col-xl-9 col-9 col1 forAll bg-primary"></div>
            <div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center">                <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1>            </div>
            <div class="container col-xl-1 col-1 col3 forAll bg-danger d-flex justify-content-center">                <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1>            </div>
            <div class="container col-xl-1 col-1 col4 forAll bg-success d-flex justify-content-center">                <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1>            </div>        </div>    </div></body>

Why does justify-content: center fail when I narrow the viewport-width?

If you wrap the contents of the flex container with any html element, for example, span, then you will easily understand what's happening here.

Contents of the flex container are actually centered within the flex container but when screen is small enough that the text George Zuberi cannot fit in one line, it wraps and that's when it seems that the contents of the flex container are not centered.

As you can see in the example below, justify-content: center applies on the span element (yellow color) which is why it is centered within the flex container (red color) but text inside the span element isn't centered.

If you want the text inside the span element to also be centered, then add text-align: center on span element.

You can use justify-content to center anything within a flex container and your text is indeed centered within flex-container. Add background color to flex-container to understand things better.

As a tip, instead of writing text directly within the flex-container, wrap the text within any html element.

.grid-container {  display: grid;  height: 100px;  grid-template-columns: 1fr 1fr 1fr;  background-color: #ECF0DE;}
.flex-container {  background: red;  color: #BD6EB6;  display: flex;  justify-content: center;  align-items: center;}
span {  width: 80%;  background: yellow;}

<header class="grid-container">  <div class="flex-container">    <span>George Zuberi</span>  </div></header>

Text Not Centered with Justify-Content: Center