How to create an anchor button with fixed height and width and centered text?

Question

This might seem trivial, but I went through many proposed solutions and found nothing. The goal is to create an anchor <a> button with fixed height and width while keeping the text centered (vertically and horizontally) regardless of the text's width.

Example:

Duplicate - http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css?rq=1 — Paulie_D, Oct 18 '16 at 11:12
So, this begs for the question to be asked, what is your context? — Mr Lister, Oct 26 '16 at 15:36

score 3 · Accepted Answer · edited Oct 26 '16 at 17:12

The best solution I reached was the following:

Define a vertical center class:
```
.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;}
```
This served as the inner container of the button to center the text vertically and horizontally.

Define a btn class:

.btn {
    width: 300px;
    height: 75px;
    background-color: transparent;
    color: #000;
    border-radius: 0;
    border: #000 solid 1px;
    cursor: pointer;
    text-align: center;}

The class btn servers for styling the button.

I finally wrapped the inner div with an anchor tag <a> to link the button:

<a href="#">
  <div class="btn text-vertical-center">
      Button text
  </div>
</a>

This seems to work fine and is compatible with most browsers as far as I know. Please let me know if there are any better solutions.

JSFiddle Example: https://jsfiddle.net/MuaazO/ga4s540v/

How to create an anchor button with fixed height and width and centered text?

1 Answers1