如何在 flex div 中垂直居中 <a> 元素？

Question

为什么我可以用 flex 居中按钮而不是 link？

#quote-btn-div {
  display: flex;
}
#quote-btn,
#twitter-link {
  background-color: #999;
  /* Green */
  border: none;
  width: 300px;
  height: 100px;
  margin: 0 auto;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
#twitter-link {
  background-color: red;
}

<div id="quote-box">
  <div id="quote-btn-div">
    <button id="quote-btn">New Quote</button>
    <a id="twitter-link">Twitter link</a>
  </div>
</div>

抱歉，如果这是一个愚蠢的问题，我还在学习。

Answer 1

line-height 通常用于使单行文本垂直居中。由于您已经在按钮上设置了高度，因此请将 line-height 设置为该值。

#twitter-link { line-height: 100px; }

#quote-btn-div {
  display: flex;
}
#quote-btn,
#twitter-link {
  background-color: #999;
  /* Green */
  border: none;
  width: 300px;
  height: 100px;
  margin: 0 auto;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
#twitter-link {
  background-color: red;
  line-height: 100px;
}

<div id="quote-box">
  <div id="quote-btn-div">
    <button id="quote-btn">New Quote</button>
    <a id="twitter-link">Twitter link</a>
  </div>
</div>

Answer 2

#twitter-link {
  line-height: 100px;
}

如何在 flex div 中垂直居中 <a> 元素？

How do I vertically center an <a> element within a flex div?

html

css

hyperlink

centering

flexbox