如何在样式为按钮的链接中对齐一些文本

Question

我创建了一个看起来像按钮的链接，在 CSS 中具有与旁边的按钮相同的属性，但由于某种原因，看起来像按钮的链接中的文本有点高...有什么建议吗？

这是属性：

.submit,
.btn_advance_search {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

我尝试了看起来像按钮的链接：

.btn_advance_search  {
   horiz-align: center;
}

没有成功。我也玩过顶部的填充，但这会使实际的按钮更大......

Answer 1

您可以使用 flex 居中对齐：

.btn_advance_search  {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   /* Add if the above styles don't take full height and width */
   height: 100%;
   width: 100%
}

Answer 2

您可以尝试将 line-height 更改为与元素的高度相同。确保元素上没有任何（垂直）填充。

你可以试试这个：

line-height: 36px;
height: 36px;

额外提示：如果您想防止元素在添加内边距时增长，您还可以在 CSS 中添加 box-sizing: border-box;。