如何將錨標記內的文本居中

Question

我希望我的錨標簽看起來像一個按鈕，並創建了這種風格的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;*/
}

它看起來像我想要的那樣，但如何在錨標簽內水平和垂直居中文本？

Answer 1

添加

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

工作演示： http : //jsfiddle.net/3SE8L/2/

Answer 2

如果元素的高度是硬編碼的，則line-height和padding工作，但我喜歡使用

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

保持文本居中在高度可能改變的標簽中。

Answer 3

要將文本水平居中對齊，垂直居中對齊，請嘗試以下操作：

CSS：示例小提琴

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

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

Answer 4

首先，刪除此樣式聲明； 這是無效的標記：

vertical-align: central;

接下來，添加以下內容以水平居中文本：

text-align: center;

最后，使您的高度自動，而不是行高聲明，將填充設置為味道：

height:auto;
padding:3px 0;

應該這樣做！ 請務必刪除無效聲明，因為它可能會導致您的 CSS 在某些瀏覽器中中斷。

Answer 5

簡單的text-align: center; 在您現有的班級中。

Answer 6

這有效：

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

Answer 7

很簡單，添加

text-align: center;

到您的目標班級。