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

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

我创建了一个看起来像按钮的链接，在 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;
}

没有成功。我还使用了顶部的填充，但这会使实际按钮变大...

解决方法

您可以使用 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%
}

,

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

你可以试试这个：

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

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