html - 即使尝试了各种方法也无法垂直居中文本

Question

我正在尝试将文本（链接）置于 div 内。我能够让它水平居中，但不能垂直居中。我尝试了很多方法，文本的垂直位置永远不会改变。Padding-top 和其他类似的方法只是增加白框的大小，不影响文本。

HTML
----------
<div className={styles.buttonBorder}>
  <Link to={`/event/${id}`} className={styles.link}>Details</Link>
</div>

CSS
----------
.buttonBorder {
  display: flex;
  align-items: center;
  height: 50px;
  border: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  border-image-source: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(148, 88, 199, 1) 0%,
    rgba(92, 62, 183, 1) 100%
  );
}

.link,
.link:visited,
link:link,
link:active {
  background: white;
  text-decoration: none;
  color: black;
  text-align: center;
  font-size: 18pt;
  border: 0;
  width: 150px;
  height: 50px;
  cursor: pointer;
  transition-duration: 0.4s;
  border: 1px solid black;
}

.link:hover {
  background: transparent;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

标签： htmlcssreactjs

Answer 1

在 .link 类中添加以下样式

display:flex;
justify-content: center;
align-items: center;