如何停止文本重叠图标并在换行时保持文本垂直居中，使用弹性框中的 Bootstrap 5 个按钮？

Question

在 flex box 情况下使用 Bootstrap 5 按钮代码和 horizontally and vertically centered text 以及带有多个按钮的 right aligned 图标，如何停止按钮文本与图标重叠当它换行时，当按钮文本换行时保留图标 vertically centered，当它换行时保留按钮文本 vertically center aligned?

您可以在 this fiddle 中通过移动中心列并使显示区域变大和变小来查看包含环绕和重叠问题的完整代码。

.custom-btn,
.custom-btn:visited {
  position: relative;
  padding: 1.5rem 0.5rem;
  margin: 0.5rem 0.5rem;
  font-size: 0.95rem;
  border-radius: 0;
  line-height: 1.2rem;
  background-color: #c1c1c1;
  border-color: #c1c1c1;
  flex: 33%;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box;
  letter-spacing: 0.8px;
  height: 70px;
}

.custom-btn:active,
.custom-btn:hover {
  background-color: #7d7c7c;
  border-color: #787878;
  text-transform: uppercase;
  color: #fff;
}

.icon-arrow-new {
  position: absolute;
  right: 10px;
  width: 22px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<a href="#" target="_blank" class="btn custom-btn">This Section<img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" /></a>

Answer 1

还有其他方法可以实现此目的，但我认为以下更改会让您得到想要的结果。

增加 .custom-btn left/right 填充到更大的数字（例如 2.2rem）以清除箭头并使用 flex 属性使文本垂直和水平居中：

.custom-btn, .custom-btn:visited {
  position: relative;
  padding: 1.5rem 2.2rem; /* Increase left/right padding */
  margin: 0.5rem 0.5rem;
  font-size: 0.95rem;
  border-radius: 0;
  line-height: 1.2rem;
  background-color: #c1c1c1;
  border-color: #c1c1c1;
  flex: 33%;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box;
  letter-spacing: 0.8px;
  /* Add flex properties */
  display: flex;  
  align-items: center;
  justify-content: center;
}

这是一个工作 jsfiddle 从 OP 的 fiddle 分叉出来的：jsfiddle.net/fd8ru69h

Answer 2

我会选择全弹性 (inline-flex) 布局。部分问题是您的一些自定义样式规则被 Bootstrap 覆盖。我在选择器中添加了第二个 class 以提高特异性。

.btn.custom-btn,
.btn.custom-btn:visited {
  display: inline-flex;
  align-items: center;
  flex: 33%;
  position: relative;
  padding: 1.5rem 0.5rem;
  margin: 0.5rem 0.5rem;
  font-size: 0.95rem;
  border-radius: 0;
  background-color: #c1c1c1;
  border-color: #c1c1c1;
  text-transform: uppercase;
  color: #fff;
  box-sizing: border-box;
  letter-spacing: 0.8px;
  height: 70px;
}

.btn.custom-btn:active,
.btn.custom-btn:hover {
  background-color: #7d7c7c;
  border-color: #787878;
  text-transform: uppercase;
  color: #fff;
}

.icon-arrow-new {
  width: 22px;
  margin-left: 8px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<a href="#" target="_blank" class="btn custom-btn">
  <span>This Section</span>
  <img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" />
</a>

<a href="#" target="_blank" class="btn custom-btn">
  <span>This<br>Section</span>
  <img src="https://svgshare.com/i/fPK.svg" class="icon-arrow-new" />
</a>

如何停止文本重叠图标并在换行时保持文本垂直居中，使用弹性框中的 Bootstrap 5 个按钮？

How to stop text overlapping icon and keep text vertically centered when wrapping, using Bootstrap 5 buttons in a flex box?

html

javascript

css

bootstrap-5