Why can't I use flex with

Question

I have the following code in index.html

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

#count-el {
  font-size: 50px;
  display: flex;
  justify-content: center;
}

#increment-btn {
  background: red;
  color: white;
  font-size: 40px;
  display: flex;
  justify-content: center;
}

<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>

Flex works in all elements except for the <button> element. It doesn't center it. Why is that?

These flex properties don't affect the elements you're applying them to, they affect the content within. The `h1` and `h2` elements themselves are not centered, the content within them is (as implied by the name justify-**content**). — George, Sep 15 '22 at 11:47
What makes you think it doesn't work? It really is doing what it's meant to be doing: [demo](https://jsfiddle.net/davidThomas/d6v4f081/1/). — David Thomas, Sep 15 '22 at 11:50
@DavidThomas thanks, I now understand. I added the button element into a div container, and the flex now works. It's all about the invisible margins. How do I close this post by selecting an answer? — Luigi Istratescu, Sep 15 '22 at 11:56
There are no invisible margins. There are just properties affecting different elements/content than you think they were affecting. — cloned, Sep 15 '22 at 13:02

score 1 · Answer 1 · answered Sep 15 '22 at 11:58

Most browsers display button elements as inline-block by default, so, it won't occupy 100% of parent's width. If you apply width 100% it will center the text, just like h1, h2. If you want to center the button itself you can use margin: 0 auto; property.

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

#count-el {
  font-size: 50px;
  display: flex;
  justify-content: center;
}

#increment-btn {
  width: 100%;
  background: red;
  color: white;
  font-size: 40px;
  display: flex;
  justify-content: center;
}

<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>

score 0 · Accepted Answer · answered Sep 15 '22 at 11:47

0

add to your button class margin-left: auto; margin-right:auto;
should look like that

#increment-btn {
  background: red;
  color: white;
  font-size: 40px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

answered Sep 15 '22 at 11:47

Konstantin Savusia

415
3
8

1

@ths: no, a defined width isn't necessary at all ([demo](https://jsfiddle.net/davidThomas/d6v4f081/2/)), what's "necessary" is that the element to be centred is not `display: inline` ([demo](https://jsfiddle.net/davidThomas/d6v4f081/3/)). – David Thomas Sep 15 '22 at 11:52
@ths it works for me https://codepen.io/savconstantine/pen/QWrdKQy without width – Konstantin Savusia Sep 15 '22 at 11:53

score 0 · Answer 3 · answered Sep 15 '22 at 12:01

For your problem you need to read this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You should add

margin: auto;
display: block;

to #increment-btn style.

Other solution is to add a div parent element to the button and add flex style there:

display: flex;
justify-content: center;

I made a codepen for you: https://codepen.io/kovtib/pen/vYjgXrP

score 0 · Answer 4 · answered Sep 15 '22 at 13:08

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

#count-el {
  font-size: 50px;
  display: flex;
  justify-content: center;
}

#increment-btn {
  background: red;
  color: white;
  font-size: 40px;
  display: flex;
  justify-content: center;
  margin-inline: auto;
}

<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>

Add margin-inline: auto to your button styles.

Why can't I use flex with elements?

4 Answers4

Why can't I use flex with