How can I vertically align the text on these CSS buttons?

Question

JSFiddle: https://jsfiddle.net/u7Lm5sjp/

I have some links like:

<div class="splash_button_row">
        <span>
        <a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>
        <a href="www.google.com" class="splash_button">label 2</a>
        <a href="www.google.com" class="splash_button">label 5 label 5label 5</a>
        <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>
        </span>
</div>

and a while bunch of .css like:

.splash_button {
background: linear-gradient(to bottom, #3498DB, #2980B9) repeat scroll 0% 0% #3498DB;
border-radius: 30px;
text-shadow: 6px 4px 4px #666;
box-shadow: 2px 2px 3px #666;
font-family: Georgia;
color: #FFF;
padding: 10px 20px;
border: 2px solid #216E9E;
text-decoration: none;
display: inline-block;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
max-width: 130px !important;
text-align: center;
font-size: 20px;
height: 65px;
vertical-align: middle;
}

The key fiddly bits here being:

height: 65px;
vertical-align: middle;

These two properties seem to be fighting one another. if I set vertical-align: middle; the text is all aligned, and the padding is evenly drawn around it(which is what I want). But when I then set height: 65px; to also make all of the buttons the same size, the text seems to get pushed to the top of the button.

How can I have all of the buttons the same (set) size, but also have the text within them vertically aligned to the center of the 'button'?

Edit:

I've read this question but it doesn't answer my question. My buttons have multiple lines, so the tricks with line-height don't work, and my buttons need to be in-line elements, so the tricks with flex don't work. Also my buttons need to be spaced, but the table-solutions seem to hinder that - but i'm still playing around with this one.

try setting the line-height to be equal to the height of the element — Quintile, Jun 25 '15 at 13:50
You should try this: https://css-tricks.com/centering-css-complete-guide/ — Atrotors, Jun 25 '15 at 13:51
@Quintile there's multiple lines in some buttons, if I change the line-height, the buttons become massive? — Paul, Jun 25 '15 at 13:54
http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css — ssb, Jun 25 '15 at 13:54
You are saying you want specific height of 65px but also padding-top/bottom adds up to your button class, so i think it becomes something like 85px. Is it OK? if it has 85px height including padding? — divy3993, Jun 25 '15 at 14:44

Aaron · Accepted Answer · 2015-06-25T14:07:50.983

Change the display to table-cell for the vertical aligm middle to work.

.splash_button_row {
  display: table;
  border-collapse: separate;
  border-spacing: 15px;
}
.splash_button {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 34;
  -moz-border-radius: 34;
  border-radius: 34px;
  text-shadow: 6px 4px 4px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  box-shadow: 2px 2px 3px #666666;
  font-family: Georgia;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #216e9e 2px;
  text-decoration: none;
  display: table-cell;
  /* TABLE-CELL */
  border: solid transparent 0 10px;
  margin: 10px;
  white-space: normal !important;
  word-wrap: break-word;
  max-width: 130px !important;
  text-align: center;
  vertical-align: middle;
  height: 65px;
  /* ADD HEIGHT*/
}

<div class="splash_button_row">
 <span>
 <a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>
    <a href="www.google.com" class="splash_button">label 2</a>
 <a href="www.google.com" class="splash_button">label 5 label 5label 5</a>
    <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>
</span>
</div>

Thank you very much! Is there a way to maintain the margins between elements while doing this? — Paul, Jun 25 '15 at 14:00
Ive updated my answer... you'll need to set the container to `display:table;` then add `border-spacing` — Aaron, Jun 25 '15 at 14:08

Senta · Answer 2 · 2015-06-25T14:27:14.293

.splash_button {
      background: #3498db;
      background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
      background-image: -moz-linear-gradient(top, #3498db, #2980b9);
      background-image: -ms-linear-gradient(top, #3498db, #2980b9);
      background-image: -o-linear-gradient(top, #3498db, #2980b9);
      background-image: linear-gradient(to bottom, #3498db, #2980b9);
      -webkit-border-radius: 34;
      -moz-border-radius: 34;
      border-radius: 34px;
      text-shadow: 6px 4px 4px #666666;
      -webkit-box-shadow: 2px 2px 3px #666666;
      -moz-box-shadow: 2px 2px 3px #666666;
      box-shadow: 2px 2px 3px #666666;
      font-family: Georgia;
      color: #ffffff;
      font-size: 20px;
      padding: 10px 20px 10px 20px;
      border: solid #216e9e 2px;
      text-decoration: none;                  
      float: none;
      white-space: normal !important;
      word-wrap: break-word;
      max-width: 130px !important;
      text-align: center;
      vertical-align: middle;
      **margin:10px **auto;****
      **display: block;**
      **height: 65px;**
      **display: flex;
      **justify-content: center; /* align horizontal */**
      **align-items: center;****
    }

Did the trick for me. See the stars. I edited my answer. I think i got what you want now.

Thank you, but as I said I need all of the buttons to be the same height - 65px - in your solution all of them are different heights, and if I set an explicit height, the vertical centering goes off kilter... — Paul, Jun 25 '15 at 14:12
Change: margin to 10px auto, display to block en add height: 65px; oh and if you want the text to be centered as well. add line-height: 65px aswell which only works for single lined text — Senta, Jun 25 '15 at 14:20

score 0 · Answer 3 · answered Jun 27 '15 at 07:49

0

The best way to align almost everything in CSS. You only need to use the below class.

.vertical-center{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

answered Jun 27 '15 at 07:49

radacina

89
2
8

How can I vertically align the text on these CSS buttons?

3 Answers3