Justify-content issue

Question

I have a toolbar and I want to place my span element as center of my flex display of the toolbar. I am missing something.

CSS

.toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
  } n

  .toolbar img {
    margin: 0 16px;
  }

  .toolbar span {
      justify-content: center;
  }

HTML

<div class="toolbar" role="banner">
    <span>Recipe Book</span>
</div>

I got a solution like this. But I like to understand about justify-content : center for display flex.

HTML

  <div class="toolbar" role="banner">
    <div class="spacer"></div>
     <span>Recipe Book</span>
    <div class="spacer"></div>

    </div>

CSS :

.spacer {
    flex: 1;
    }

score 1 · Answer 1 · answered Jan 19 '21 at 06:49

run code.

.toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content:center;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
  } n

  .toolbar img {
    margin: 0 16px;
  }

  .toolbar span {
      justify-content: center;
  }

<div class="toolbar" role="banner">
    <span>Recipe Book</span>
</div>

score 0 · Answer 2 · answered Jan 19 '21 at 06:26

0

Try moving the justify-content: center to toolbar

answered Jan 19 '21 at 06:26

WeiTang Lau

103
1
11

it doesn't work that way – Nicoleta Wilskon Jan 19 '21 at 06:30
@NicoletaWilskon Sorry I left out that you should also add display flex on the `toolbar span` – WeiTang Lau Jan 19 '21 at 06:36

Rob Monhemius · Accepted Answer · 2021-01-19T06:42:16.480

Use justify-content: center. Aligning with align-items will align based on the cross-axis of your flex-direction. justify-content: center will align based on the regular axis of your flexbox.

Set the flex-direction to flex-direction: column to better understand what I am talking about in action.

On a sidenote, just changing the flex-direction could work too for this specific example.

.toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    display: flex;
    justify-content: center;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
  }

<div class="toolbar" role="banner">
    <span>Recipe Book</span>
</div>

Justify-content issue

3 Answers3