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

Question

JSFiddle: https://jsfiddle.net/u7Lm5sjp/
I have some links like:
<div class="splash_button_row">
<span>
label 4 label 4 label 4
label 2
label 5 label 5label 5
label 5 label 5label 5label 5 label 5label 5
</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.

Answer 1

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>
label 4 label 4 label 4
label 2
label 5 label 5label 5
label 5 label 5label 5label 5 label 5label 5
</span>
</div>

Answer 2

.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.

Answer 3

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%);
}