将项目与响应卡的末端对齐(垂直居中) [英] Aligning an item to the end of a responsive card, with vertical centering

问题描述

我正在尝试将一个项目(在本例中为Font Awesome图标)对齐到尺寸适当的卡片的末尾(宽度方向).我正在努力使这个工作.这是我的信用卡的html:

I am attempting to align an item, in this case a Font Awesome icon, to the end of a responsively sized card (width wise). I am struggling to get this to work. Here is my html for my card:

<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>

如您所见，人字形符号不保留在卡的末尾.任何帮助表示感谢，谢谢.

As you can see the chevron does not remain at the end of the card. Any help appreciated, thanks.

这是我想要的样子:

Here is what I want it to look like:

推荐答案

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

Best way I think to do this is like this:

HTML结构略有变化，只是将图标拉到车身div之外

a bit change on HTML structure, just pulled the icon outside the car-body 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>

这篇关于将项目与响应卡的末端对齐(垂直居中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！