How to align text vertically and horizontally in CSS button

Question

I am trying to align text horizontally and vertically inside buttons. I checked tons of solutions, no joy. This is what I have right now:

<div class="buttonx">

                <a href="texttext.html">Text</a>

                <a href="texttext.html">text text<br>text</a>

                <a href="texttext.html">text</a>

                <a href="texttext.html">text</a>

                <a href="texttext.html">text</a>

            </div>
<style>
.buttonx {
    display: flex;
    flex-wrap: wrap;
}

.buttonx a {
    display: table;
    background-color: #a00c1a;
    width: 120px;
    line-height: 20px;
    margin: 10px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    text-align: center;
    align-items: center;
    color: white;
}
</style>

The text comes out as aligned horizontally, but not vertically. Please help.

Maik Lowrey · Answer 1 · 2022-03-11T09:06:09.600

1

Change only your buttonx class like that:

.buttonx {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.buttonx {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.buttonx a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a00c1a;
  width: 120px;
  line-height: 20px;
  margin: 10px;
  text-decoration: none;
  color: rgb(0, 0, 0);
  text-align: center;
  color: white;
  height:40px;
}

<div class="buttonx">

  <a href="texttext.html">Text</a>

  <a href="texttext.html">text text<br>text</a>

  <a href="texttext.html">text</a>

  <a href="texttext.html">text</a>

  <a href="texttext.html">text</a>

</div>

Note I also remove from your buttonx a class some css properties.

edited Mar 11 '22 at 09:06

answered Mar 11 '22 at 09:01

Maik Lowrey

15,957
6
40
79

It centered the buttons but not the text. Thanks anyway – Lukas Mar 11 '22 at 09:05
1

@Lukas You welcome! The link text is also centered. can you check again please!? – Maik Lowrey Mar 11 '22 at 09:07
I don't know if you changed something or if I copied something incorrectly the first time, but it does work now! Thank you very much! – Lukas Mar 11 '22 at 09:19
1

@Lukas Yes i edit after your first comment the anchor properties. ;-) – Maik Lowrey Mar 11 '22 at 09:20

score 0 · Accepted Answer · answered Mar 11 '22 at 09:00

.buttonx {
  display: flex;
  flex-wrap: wrap;
}

.buttonx a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a00c1a;
  width: 120px;
  line-height: 20px;
  margin: 10px;
  text-decoration: none;
  color: rgb(0, 0, 0);
  text-align: center;
  color: white;
}

<div class="buttonx">

  <a href="texttext.html">Text</a>

  <a href="texttext.html">text text<br>text</a>

  <a href="texttext.html">text</a>

  <a href="texttext.html">text</a>

  <a href="texttext.html">text</a>

</div>

How to align text vertically and horizontally in CSS button

2 Answers2