如何将锚标记内的文本居中

Question

I want my anchor tag look like a button, and created this style JsFiddle

.details-button {
    background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent;
    border: 1px solid #FAB149;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px #999999;
    -ms-box-shadow: 0 1px 2px #999999;
    box-shadow: 0 1px 2px #999999;
    color: #FFFFFF;
    cursor: pointer;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    -ms-text-shadow: 0 -1px #099FDF;
    text-shadow: 0 -1px #099FDF;
    margin: 4px;
    height: 28px;
    width: 85px;
    vertical-align: central;
    align-items: center;
    text-decoration: none;
    font: menu;
    display: inline-block;
    /*padding: 6px 0 5px 18px;*/
}

It looks as I want, but how to center text horizontally and vertically inside anchor tag?

Answer 1

Add

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

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

Answer 2

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.

Answer 3

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

Answer 4

First, remove this style declaration; it is invalid markup:

vertical-align: central;

Next, add this to center your text horizontally:

text-align: center;

Finally, make your height auto and instead of a line-height declaration, set the padding to taste:

height:auto;
padding:3px 0;

That should do it! Be sure to remove the invalid declaration as it can cause your CSS to break in some browsers.

Answer 5

Simply text-align: center; in your existing class.

Answer 6

This works:

{
   display: grid;
   justify-content: center;
}

Answer 7

So simple, just add

text-align: center;

to your targeted class.