如何对齐样式为按钮的 link 中的一些文本

Question

我制作了一个看起来像按钮的 link，CSS 中的属性与其旁边的按钮相同，但由于某种原因，[=] 中的文本有点高31=] 看起来像一个按钮...有什么建议吗？

这是属性：

.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;
}

我尝试了看起来像按钮的 link:

.btn_advance_search  {
   horiz-align: center;
}

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

Answer 1

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

你可以试试这个：

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

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

Answer 2

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

如何对齐样式为按钮的 link 中的一些文本

how can I align some text inside a link styled as a button

html

css

alignment

hyperlink