Make the button Centre

Question

I have a button that i make. but what i want is that to make the button center alligin. i use alignment center. but it is not working. what i have to do is that to make the button allignement in center in whole page.

.button {
  text-decoration:none;
  text-align:center;
  display: flex;
  background: #333333;
  color: white;
  justify-content: space-between;
  align-items: center;
  pointer-events:none;
  max-width:660px;
  border-bottom:solid gray 1px
    font-family: DIN pro;
    font-weight: bold;
}
.button .fa {
  padding:1em;
  pointer-events:auto;
  width:1.5em;
}
.button::before {
  content: '';
  padding: 1em
}

<a href="#" class="button"> CONTACT <i class="fa fa-arrow-right border-left "></i></a>

i cannot replicate. the text is correctly centered in this snippet — Lelio Faieta, Feb 25 '21 at 09:41
Is the height of the button parent set to something? Set it to `height: 100%` i.e — AdriSolid, Feb 25 '21 at 09:41
@LelioFaieta i don't want text to be center i want button to be center n page — Danish Riaz, Feb 25 '21 at 09:43
just add `width: fit-content;` and `margin: 0 auto;` to `.button` — s.kuznetsov, Feb 25 '21 at 09:53

score 0 · Answer 1 · answered Feb 25 '21 at 09:43

Add margin: 0 auto; to your .button class.

.button {
  margin: 0 auto;
  text-decoration:none;
  text-align:center;
  display: flex;
  background: #333333;
  color: white;
  justify-content: space-between;
  align-items: center;
  pointer-events:none;
  max-width:660px;
  border-bottom:solid gray 1px
    font-family: DIN pro;
    font-weight: bold;
}
.button .fa {
  padding:1em;
  pointer-events:auto;
  width:1.5em;
}
.button::before {
  content: '';
  padding: 1em
}

<a href="#" class="button"> CONTACT <i class="fa fa-arrow-right border-left "></i></a>

score 0 · Answer 2 · answered Feb 25 '21 at 09:43

Set display: flex; justify-content: center; for the parent of that button. Here the parent is body

body {
  display: flex;
  justify-content: center;
}

body {
  display: flex;
  justify-content: center;
}
.button {
  text-decoration: none;
  text-align: center;
  display: flex;
  background: #333333;
  color: white;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  max-width: 660px;
  border-bottom: solid gray 1px;
  font-family: DIN pro;
  font-weight: bold;
}
.button .fa {
  padding: 1em;
  pointer-events: auto;
  width: 1.5em;
}
.button::before {
  content: "";
  padding: 1em;
}

<a href="#" class="button">
      CONTACT <i class="fa fa-arrow-right border-left "></i
    ></a>

score 0 · Answer 3 · answered Feb 25 '21 at 09:46

First of all, you need to remove the display: flex property in your button, so then you will can center it by a parent element.

You are setting text-align: center in the button, but what you need to do is to set this property in a parent element of the button.

EXAMPLE

<div style="text-align: center;">
    <button>I'm in the center!</button>
</div>

Make the button Centre

3 Answers3