如何在锚点标签内居中文本

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

外观看起来就像我想要的，但如何在锚标签内水平垂直居中文本？

- Arsen Mkrtchyan

---

使用行高可以实现垂直居中。使用文本对齐可以实现水平居中。 - Mark

只是提供信息：对于大多数Web浏览器来说，“align-items”还不是真正的东西。此外，它仅适用于具有display:flex或display:inline-flex的容器，然后仅适用于该容器内部的块元素，而不是文本本身。 - mellowfish

Answer 1

添加

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

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

- MarcinJuraszek

---

看起来不错，我可以问一下什么是行高，你从哪里得到了数字28？ :) - Arsen Mkrtchyan

它设置了简单文本行的高度。我将其设置为28，因为这是您在元素“height”中设置的值。它使您的行填充整个空间并自动使内容垂直居中。 - MarcinJuraszek

@ArsenMkrt 行高是元素中每行文本的高度，包括行上方和下方的行间距。对于单行文本，如果将其设置为容器高度，则可以使文本居中。 - mellowfish

啊，好的，但是对我来说看起来很神奇，我们将线宽设置为按钮高度并将文本排列到中心，行高是文本中两行之间的距离，不是吗？ - Arsen Mkrtchyan

谢谢，"line-height" 属性对我很有帮助。 - Henry

Answer 2

line-height和padding的工作是在元素高度固定的情况下进行的，但我喜欢使用它们。

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

如何在高度可能会改变的a标签中保持文本居中。

- Kat

---

你在这里做的是将锚点标签居中，而不是将锚点标签中的文本居中。 - Jamie Marshall

@Jamie Marshall 实际上，如果您将该代码添加到锚标记（而不是其容器）中，则可以使文本在锚标记中居中。 - Darren S

Answer 3

要将文本水平居中并垂直居中，请尝试以下方法：

CSS：示例代码

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

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

- badAdviceGuy

---

填充使按钮变大。 - Arsen Mkrtchyan

@ArsenMkrt，也许你可以编辑填充为你想要的2px 3px等，或者使用EMs像'.75em'等。对吧？ - badAdviceGuy

好的，是的，但是我想让我的按钮高度为28像素...或者需要删除高度并通过填充来控制高度...感谢您提供另一种方法。 - Arsen Mkrtchyan

Answer 4

首先，删除这个样式声明；它是无效的标记：

vertical-align: central;

接下来，添加以下内容以使您的文本水平居中：

text-align: center;

最后，将高度设置为自动，不需要使用行高声明，根据需求设置填充(padding)即可。

height:auto;
padding:3px 0;

就这样！确保删除无效的声明，因为它可能导致您的CSS在某些浏览器中出现问题。

- code-sushi

Answer 5

这个有效：

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

- Karolis Vaitkevicius

Answer 6

只需在现有类中添加 text-align: center;。

- mellowfish

---

很好，但它只能水平设置。 - Arsen Mkrtchyan

啊，我在你的问题中漏掉了“并且垂直”的部分。这要自动完成起来就难多了。 - mellowfish

Answer 7

非常简单，只需添加

text-align: center;

返回您的目标类。

- mohamed ibrahim

---

但如何在锚标签内水平垂直居中文本？你的答案只有水平居中。 - Karolis Vaitkevicius

margin-top:auto; & margin-bottom: auto; 的翻译是：上边距自动；下边距自动； - mohamed ibrahim