Unable to position content to be center in flexbox

Question

I have a Header component as below

import React from 'react';
import styled from 'styled-components';

const Header = () => (
  <div className={className}>
    <div>LEFT</div>
    <div className="progress-bar">CENTER</div>
    <div>RIGHT</div>
  </div>
);

const StyledHeader = styled(Header)`
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding: 0 2rem;
`;

export default StyledHeader;

And below is the content of .progress-bar

.progress-bar {
    background-color: green;
    flex: 1;
    justify-content: center;
    align-items: center;
}

Initially CENTER was positioned center due to justify-content: space-between defined at StyledHeader, the problem was background-color: green can only take very little space, so I proceed to define a CSS style, to make it flex: 1 in order to take as much space as possible, but I couldnt position it to be center anymore?

you only need text-align:center for the progressbar – Temani Afif May 12 '20 at 19:07 — Temani Afif, May 12 '20 at 19:07

score 1 · Answer 1 · answered May 12 '20 at 16:33

Add text-align: center; like this:

.progress-bar {
    background-color: green;
    flex: 1;
    text-align: center;
}

If you have other content (eg: html elements) that you want to position to the center inside .progress-bar, then you need to add display: flex;, like this:

.progress-bar {
    background-color: green;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

score 1 · Accepted Answer · answered May 12 '20 at 16:36

1

div element with class progress-bar should be a flex container in order for its children to be affected by properties of flexbox

.progress-bar {
    background-color: green;
    flex: 1;
    display: flex;              <--------
    justify-content: center;
    align-items: center;
}

answered May 12 '20 at 16:36

Yousaf

27,861
6
44
69

Ahh I see! I thought since `StyledHeader` is a `flexbox` and so all of it's nested component will be treated as `flexbox`! – Isaac May 12 '20 at 16:38

score -1 · Answer 3 · answered May 12 '20 at 16:37

-1

Because you have not put any tag for 'CENTER' text. just put a p tag on it, then it should work.

answered May 12 '20 at 16:37

Abtahi Tajwar

21
4

Unable to position content to be center in flexbox

3 Answers3