Cant properly set my Links in center of div

Question

I have three divs and inside them I have links, my problem is that I cant set that links in the middle of the div. I thought that text-align:center; will make it but unfortunately not, and I guess that is because I use float or something

.column {
  float: left;
  width: 33.33%;
  height:50px;
  text-align:center;
    background-color: #08d;
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    cursor: pointer;
    font-size: 18px;
    height: 50px;
    margin-top: 38px;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
    background-color:blue;

}

<div class="row">
                        <div class="column"><a href="javascript: document.saveExpense.submit()"
                                               role="menuitem">Create</a>
                        </div>
                        <div class="column"><a href="javascript: document.switchToIncomeTransaction.submit()"
                                               role="menuitem">Switch to income transaction</a>
                        </div>
                        <div class="column"><a href="javascript: document.cancelTransaction.submit()" role="menuitem">Cancel</a>
                        </div>
                    </div>

Take a look at the css [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) property. — Adarsh Mohan, Jan 16 '23 at 21:27

vvave vvave · Answer 1 · 2023-01-16T21:41:34.440

These are 2 ways to obtain vertical align:

use flex box (https://css-tricks.com/snippets/css/a-guide-to-flexbox/=
Use an old trick: set display:table on the container, set display: table-cell and vertical-align: middle on the element inside the container you want to vertically center.

Here is the CSS code:

    .column {
    float: left;
    width: 33.33%;
    height: 50px;
    text-align: center;
    background-color: #08d;
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    cursor: pointer;
    font-size: 18px;
    height: 50px;
    margin-top: 38px;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    background-color: blue;
}
.column {
    display: table;
}
.column a {
    display: table-cell;
    vertical-align: middle;
}

Here the working Codepen https://codepen.io/Davevvave/pen/RwBLbmx

Cant properly set my Links in center of div

1 Answers1