vertical-align does not work

Question

I have this HTML:

<div class="title_right mid_center top_menu">
  <a class="btn btn-app" href="/Home/ComoFunciona">
  <a class="btn btn-app" href="/Home/Tarifas">
  <a class="btn btn-app" href="/Home/Contacto">
  <a class="btn btn-app" href="/Security/Account">
</div>

The CSS is:

.page-title .title_right {
  width: 55%;
  float: left;
  display: block;
}

.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
}

div.top_menu {
    height: 167px;
    vertical-align: middle;
}

How can I center those buttons vertically? I don't want to patch it using padding.

Add the style property `vertical-align: middle` to each `.btn`. `vertical-align` specifies the alignment for the elements you've applied the property to as opposed to the children of that element. — Thomas Maddocks, Aug 05 '17 at 01:09

P.S. · Answer 1 · 2017-08-05T01:24:34.530

0

It's pretty easy with Flexbox. I have changed only div.top_menu styles:

.page-title .title_right {
    width: 55%;
    float: left;
    display: block;
}

.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
    background-color: violet;
}

div.top_menu {
    height: 167px;
    vertical-align: middle;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;

    -webkit-justify-content: center;
    justify-content: center;
}

<div class="title_right mid_center top_menu">
  <a class="btn btn-app" href="/Home/ComoFunciona">1</a>
  <a class="btn btn-app" href="/Home/Tarifas">2</a>
  <a class="btn btn-app" href="/Home/Contacto">3</a>
  <a class="btn btn-app" href="/Security/Account">4</a>
</div>

Need to say, that it's a crossbrowser solution, but some old browser doesn't support flexbox.

edited Aug 05 '17 at 01:24

answered Aug 05 '17 at 01:07

P.S.

15,970
14
62
86

It did not work for me.... what may be affecting? – jstuardo Aug 05 '17 at 01:14
In this code snippet "1", "2", "3" and "4" are not in the middle of screen? – P.S. Aug 05 '17 at 01:15
When i said "screen", i meant the `div` element – P.S. Aug 05 '17 at 01:22
your sample works, but my code does not. – jstuardo Aug 05 '17 at 01:51

score 0 · Accepted Answer · answered Aug 05 '17 at 01:21

Using display: table-cell with your vertical-align: middle should do it.

.page-title .title_right {
  width: 55%;
}

.mid_center {
    width: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 20px;
}

div.top_menu {
    height: 167px;
    vertical-align: middle;
    background-color: lightgray;
    display: table-cell;
}

<div class="title_right mid_center top_menu">
  <a class="btn btn-app" href="/Home/ComoFunciona">1</a>
  <a class="btn btn-app" href="/Home/Tarifas">2</a>
  <a class="btn btn-app" href="/Home/Contacto">3</a>
  <a class="btn btn-app" href="/Security/Account">4</a>
</div>

vertical-align does not work

2 Answers2