How can I center a flex-element with unknown width that is not a button-element with CSS?

Question

There's a style for a button, that can be applied to a-elements and button-elements:

.button {
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 150px;
  min-height: 50px;
  margin: 0 auto 20px auto;
  padding: 0;
  border: 1px solid black;
  background: white;
  font-size: 1.4rem;
}

<a class="button">a-element</a>
<button class="button" type="button">a-element</button>

While this works fine, there's a difference in rendering:

the a-element has 100 % width of the parent container
the button-element doesn't stretch and is centered

I'm not sure which browser default style property for buttons causes this.

How can I make the a-element to behave like the button?

So, the element is centered but not stretched.

display:table; ... (text align center and line-height to vertical align) — Temani Afif, Jul 07 '20 at 10:15
by the way, width:fit-content is also a good solution now so you can keep the display:flex — Temani Afif, Jul 07 '20 at 10:30
@TemaniAfif Thank you for finding the dupe. It didn't came up on my search. `width: fit-content;` did the trick. — lampshade, Jul 07 '20 at 10:30

Paulie_D · Answer 1 · 2020-07-07T10:17:28.197

1

Use inline-flex

.button {
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 150px;
  min-height: 50px;
  margin: 0 auto 20px auto;
  padding: 0;
  border: 1px solid black;
  background: white;
  font-size: 1.4rem;
}

a.button {
  display: inline-flex;
  background: lightblue;
}

body {
text-align:Center;
}

<a class="button" href="#">a-element</a>
<button class="button" type="button">a-element</button>

edited Jul 07 '20 at 10:17

answered Jul 07 '20 at 10:12

Paulie_D

107,962
13
142
161

Yeah, but unfortunately `inline-flex` will stop `margin: auto` from working and the element is not centered anymore. – lampshade Jul 07 '20 at 10:13
Then you can center it but adding `text-align:center` to the parent. – Paulie_D Jul 07 '20 at 10:16
Yeah, but if I don't need to center everything in the parent, then I need to add another wrapper for the button. I thought there might be a way to circumvent this. – lampshade Jul 07 '20 at 10:25

Niloy · Answer 2 · 2020-07-07T10:25:14.180

-1

It's just because of display : flex, can be solved with inline flex

EDITED

.button {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 150px;
  min-height: 50px;
  width: auto;
  margin: 0 auto 20px auto;
  padding: 0;
  border: 1px solid black;
  background: white;
  font-size: 1.4rem;
}

.btn-container{
  text-align:center;
}

<div class="btn-container">
  <a class="button">a-element</a>
  <button class="button" type="button">a-element</button>
</div>

edited Jul 07 '20 at 10:25

answered Jul 07 '20 at 10:10

Niloy

576
4
13

Yeah, but unfortunately `inline-flex` will stop `margin: auto` from working and the element is not centered anymore. – lampshade Jul 07 '20 at 10:15
if you want to center the button you can put them in a div and add text-align center. SEE MY UPDATED ANSWER – Niloy Jul 07 '20 at 10:21
Yeah, but if I don't need to center everything in the parent, then I need to add another wrapper for the button. I thought there might be a way to circumvent this. – lampshade Jul 07 '20 at 10:25
in this case, you need a wrapper, then you can use position: absolute with relative wrapper or simply text align center – Niloy Jul 07 '20 at 10:31

How can I center a flex-element with unknown width that is not a button-element with CSS?

2 Answers2