创建等高按钮答案

【问题标题】：Creating an equal height buttons创建等高按钮
【发布时间】：2021-06-07 00:35:50
【问题描述】：

希望使用居中对齐的文本制作一个等高按钮。我尝试了多种方法，文本正确居中对齐，但图标确实比现在的对齐方式混乱。

请注意，伪元素中使用的符号'>'是临时目的，如果我找到解决方案，我将替换为背景自定义图标。

这是带有示例的 JSFiddle - https://jsfiddle.net/bgLjfnds/13/

<div class="cont">
  <a href="https://www.w3schools.com/" target="_blank" class="btn-primary">visit the site</a>
</div>

<div class="cont">
  <a href="https://www.w3schools.com/" target="_blank" class="btn-primary">visit the full site now go<br>visit the full site</a>
</div>

【问题讨论】：

只需将 height 属性从 :after 移动到父级。
@Yadab，我可以提高到父级，但文本不会居中。
将您的高度增加到 40 像素或更多。这样您的内容将固定在中心。
@Yadab，您是否尝试过编辑小提琴，增加高度不会自动居中顶部按钮。我试过高度：60px;

标签： javascript html css twitter-bootstrap sass

【解决方案1】：

您可以为按钮添加另一个图层，并为其指定高度，然后使用align-items: center; 将其中的所有内容居中

.cont {
  margin: 20px 10px;
}

.btn-primary {
  font-size: 18px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0;
  border: none;
  padding: 15px 50px;
  color: #fff;
  min-width: 200px;
  background: #626f00;
  
  /* using flex box */
  display: inline-flex;
  align-items: center;
  
  /* assigning height */
  height: 40px;
}

.btn-primary span::after {
  content: '>';
  margin-left: 15px;
}

<div class="cont">
  <a href="https://www.w3schools.com/" target="_blank" class="btn-primary"><span>visit the site</span></a>
</div>

<div class="cont">
  <a href="https://www.w3schools.com/" target="_blank" class="btn-primary"><span>visit the full site now go<br>visit the full site</span></a>
</div>

【讨论】：

我正在寻找两个等高的按钮。
我已经编辑过了，是你要找的吗？
我根据你的描述改了答案，请再检查一遍。
我认为这看起来是正确的，我会尝试！谢谢

【解决方案2】：

您可以通过 CSS flexbox 轻松完成，无需在之前或之后

.cont {
  margin: 20px 10px;
}

.btn-primary {
  font-size: 18px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0;
  border: none;
  padding: 15px 50px;
  color: #fff;
  min-width: 200px;
  background: #626f00;
  display: flex;
  align-items: center;
 
}

.icon {
  margin-left: 15px;
  line-height: 1;
}

【讨论】：

你想让我在标签内添加另一个“图标”标签吗？
你可以这样做。没有伪元素的麻烦。您正在使用大约两个按钮应该相同的高度和相等.. .cont 使这个容器显示灵活。 justify-content: center; align-items: center

【解决方案3】：

如果您使用的是 jquery，我建议您使用 match-height jquery 插件。它将根据您的按钮文本动态设置高度。否则，您必须设置按钮的高度。

Match height Plugin: [https://github.com/liabru/jquery-match-height]
Codepen Solution: [https://codepen.io/chhiring90/pen/xxRyEWv]

【讨论】：