How to center text inside anchor tag

To align your text in the center horizontally and in the middle vertically, try this:

CSS: Example Fiddle

.details-button{
  //your existing styles
  //height: 28px; <-- remove this entry

  text-align: center;
  padding: 6px 0;
 }

line-height and padding work if the height of the element is hard-coded, but I like to use

{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

to keep text centered in a tags where the height may change.

Add

text-align: center;
line-height: 28px;

working demo: http://jsfiddle.net/3SE8L/2/

Related