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

更新！

添加绝对定位，将top设置为50％，并将Y转换为-50％以说明图标的高度

const SelectElement = ({
    select, value, values, onChangeValue,
}) => {
    ...
    <Select
        ...
        value={value[0]}
        onChange={onChangeValue}
    >
    ...
};

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


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

.chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: transformY(-50%);
}

Answer 2

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

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

将项目与响应卡的末端对齐（垂直居中）

3 个答案: