Vertically align text in button

[seanlincoln]

Hi,
I know this may be outside the scope of your support but I was hoping I could get a little help with this problem.

I can’t seem to be able to get the text inside a button to align centre vertically…

this is the css code im using for the button…

/* Comment button Styling */
#entry-comment-submit {
  	font-weight: bold;
  	font-size: 19px; 
  	text-shadow: none;
		background-color: #FFF;
    border: 2px solid;
  	color: #52c27d;
}
#entry-comment-submit:hover {
		background-color: #52c27d;
    border: 2px solid;
    border-radius: 0.1em;
  	color: #FFF;
  	border-color: #49ae70;
    -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
/* Comment button Styling */

Any help would be amazing.

cheers
sean

[ruenel]

Hello Sean,

Thank you for the very detailed post information.

please keep in mind that aside from the padding, the line height of the text will also affect the height of the button. Please have your code updated and use this:

/* Comment button Styling */
#entry-comment-submit {
    font-weight: bold;
    font-size: 19px; 
    line-height: 19px; 
    text-shadow: none;
    background-color: #FFF;
    border: 2px solid;
    color: #52c27d;
}

#entry-comment-submit:hover {
    background-color: #52c27d;
    border: 2px solid;
    border-radius: 0.1em;
    color: #FFF;
    border-color: #49ae70;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
/* Comment button Styling */

Take notice at the code. I added line-height: 19px;, this would make the line-height the same as the font height. If you have a greater line-height than the font size, you will have to adjust your bottom padding.

Hope this explains it briefly.