时间戳

首页 > 解决方案 > 将项目与响应式卡片的末尾对齐，垂直居中

javascript - 将项目与响应式卡片的末尾对齐，垂直居中

问题描述

我正在尝试将一个项目（在本例中为 Font Awesome 图标）与响应大小的卡片（宽度方向）的末尾对齐。我正在努力让它发挥作用。这是我的卡片的 html：

<div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
        <div class="card-body">
            <h4 class="card-title">Card Title</h4>
            <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
            <i class="fas fa-chevron-right fa-3x align-self-center"></i>
        </div>
    </a>
</div>

如您所见，人字形不会保留在卡片的末尾。任何帮助表示赞赏，谢谢。

这是我想要的样子： 在此处输入图像描述

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

更新！

添加绝对定位，将顶部设置为 50% 并将 Y 转换为 -50% 以考虑图标的高度

.mycard {
  flex-direction: row!important;
}


/*this attempted solution does not seem to work*/

.chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: transformY(-50%);
}
<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas chevron fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>

推荐阅读