首頁猿問將項目與響應式卡片的末尾對齊，垂直居中

將項目與響應式卡片的末尾對齊，垂直居中

JavaScript

收到一只叮咚 2022-07-21 22:25:19

我正在嘗試將一個項目（在本例中為 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>如您所見，人字形不會保留在卡片的末尾。任何幫助表示贊賞，謝謝。這是我想要的樣子：

查看完整描述

3 回答

LEATH

TA貢獻1936條經驗獲得超7個贊

我認為最好的方法是這樣的：

對 HTML 結構進行了一些更改，只是將圖標拉到了車身 div 之外

<h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>

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

</a>

</div>

CSS

<style>

i {

position: absolute;

top: 50%;

right: 20px;

transform: translate(0,-50%);

}

.card-body {

padding-right: 50px;

}

</style>

反對回復 2022-07-21

米脂

TA貢獻1836條經驗獲得超3個贊

添加絕對定位，將頂部設置為 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%);

}

<h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>

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

</div>

</a>

</div>

反對回復 2022-07-21

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

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

.mycard {

flex-direction: row!important;

}

.fa-chevron-right {

margin-left: 100%;

}

<h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>

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

</div>

</a>

</div>

反對回復 2022-07-21

3 回答
0 關注
144 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將項目與響應式卡片的末尾對齊，垂直居中

將項目與響應式卡片的末尾對齊，垂直居中

3 回答

添加回答

將項目與響應式卡片的末尾對齊，垂直居中

將項目與響應式卡片的末尾對齊，垂直居中