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

Question

我正在尝试将一个项目（在本例中为 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>如您所见，人字形不会保留在卡片的末尾。任何帮助表示赞赏，谢谢。这是我想要的样子：

Answer 1

我认为最好的方法是这样的：

对 HTML 结构进行了一些更改，只是将图标拉到了车身 div 之外

<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 Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>

            </div>

            <i class="fas fa-chevron-right fa-3x align-self-center"></i>

        </a>

    </div>

</div>

CSS

<style>

    i {

        position: absolute;

        top: 50%;

        right: 20px;

        transform: translate(0,-50%);

    }

    .card-body {

        padding-right: 50px;

    }

</style>

Answer 2

添加绝对定位，将顶部设置为 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>

Answer 3

您可以使用以下命令将其推到最后margin-left: 100%：

.mycard {

  flex-direction: row!important;

}

.fa-chevron-right {

  margin-left: 100%;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<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 fa-chevron-right fa-3x align-self-center"></i>

      </div>

    </a>

  </div>

</div>