Question

我有一个锚标签，我给它一个高度和一个背景颜色，但我不能让文本在背景颜色的中间垂直对齐。

我希望文本上方和下方的背景颜色相同，但高度全部添加到文本下方。我不认为我可以使用填充，考虑到执行此操作（请参阅codepen链接），我还尝试了display: table在父级和table-cell上的链接等，并应用line-height。

以下是代码，但codepen will better explain我想做的事情：

HTML：

<div class="border">
  <a href="#">Link</a>
</div>

SCSS：

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;

  &:hover {
    width: 100%;
    height: 100%;
  }
}

Answer 1

我修改了您的代码笔代码。请检查下面的代码，或者您也可以在代码笔上查看。 http://codepen.io/gauravshankar/pen/MYPEKw

body {
  background-color: #1d1f20;
}
.border {
  display: table;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  transition: all 250ms ease-out;
  box-sizing: border-box;
  border-spacing: 10px;
}
.border:hover {
  border-spacing: 0px;
}
a {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
}

<div class="border">
  <a href="#">Link</a>
</div>

http://codepen.io/gauravshankar/pen/MYPEKw

Answer 2

只要按钮中只有一行文字，您就可以使用line-height来调整标签的y位置。

例如，添加

line-height: 50px;

到a标记几乎将其垂直居中。您可能还需要为它设置动画，但如果您希望它在悬停时也居中。

Answer 3

将行高添加到<a>已添加 Demo

a {   
  line-height:55px;
  vertical-align:middle;
}

修改

对于悬停，您还需要指定行高以在中间对齐它。你可以尝试这样：

a { line-height:55px; } a:hover { width: 100%; height: 100%; line-height:70px; position:relative; }

更新了 Demo

Answer 4

＆＃13;

body { 
  background-color: rgb(29, 31, 32); 
}

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /*height: 80%;*/
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  padding:12px 0px;
  
  &:hover {
    width: 100%;
    height: 100%;
  }
}

＆＃13;

<div class="border">
  <a href="#">Link</a>
</div>

＆＃13;

删除高度使用填充

a {
display: inline-block;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 80%; */
width: 90%;
text-align: center;
color: #FFF;
font: 24px sans-serif;
text-decoration: none;
background-color: #2BD6C5;
transition: 250ms ease-in;
padding: 12px 0px;
}

Answer 5

您可以将锚点包裹在一个按钮中，文本将自动居中。

JSFiddle

<div class="border">
  <button><a href="#">Link</a></button>
</div>

a {
  color: #FFF;
  text-decoration: none;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  border: none;
  cursor: pointer;

  &:hover {
    width: 100%;
    height: 100%;
  }
}

Answer 6

检查此代码。

body { 
  background-color: rgb(29, 31, 32); 
}

.border { 
  display: inline-block;
  width: 200px;
  height: 70px;
  border: 2px solid #2BD6C5;
  position: relative;
}

a {   
  display: inline-block;
  
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 80%;
  width: 90%;
  text-align: center;
  color: #FFF;
  font: 24px sans-serif;
  text-decoration: none;
  background-color: #2BD6C5;
  transition: 250ms ease-in;
  line-height: 55px;
  
}
a:hover{
  width: 100%;
    height: 100%;
    line-height: 70px;
}

<div class="border">
  <a href="#">Link</a>
</div>

在css中设置高度后垂直居中锚标签文本

6 个答案: