ブートストラップv4 - 垂直に整列したユーザーカードを作成する

Question

まだアルファですが、私は確かに作業しているウェブサイトにブートストラップを使用することにしました。 私のサイトの重要な要素として、私はブートストラップの新しいカードクラスに基づいてユーザーの基本情報を表示するための "ビジネス"カードを作りたいと思っています。 残念ながら私はこれらのカードを私がそれらを望む方法を正確に見て得ることができません。

これは、私は彼らが見えるようにする方法である： layout

そしてこれは、それは、これまでどのように見えるかです：

<div class="card user-card" onclick="site.load_content('user_profile', 'cteoa3n');"> 
 
    <div class="card-block"> 
 
     <div class="user-card-image d-inline-block"><img src="/media/profile_pictures/cteoa3n/1472677543.jpg" class="img-circle"></div> 
 
     <div class="user-card-content text-nowrap d-inline-block"> 
 
     <h5 class="card-title">Chris Lnrd</h5> 
 
     <div class="card-text">Free User</div> 
 
     <div class="card-text dental-text font-weight-bold">Dental Medicine</div> 
 
     <div class="card-text">Generation 2016 - Group 11</div> 
 
     </div> 
 
    </div> 
 
</div>

：私のコードザッツ attempt

それのためのscss：

$user-card-width: 300px; 
 
$user-card-height: 130px; 
 

 
.user-card{ 
 
    height: $user-card-height; 
 
    width: $user-card-width; 
 
    max-width: $user-card-width; 
 
    overflow: hidden; 
 
    .card-block{ 
 
    height: 100%; 
 
    } 
 
    .user-card-image{ 
 
    height: 100%; 
 
    padding-right: 15px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    } 
 
    .user-card-content{  
 
    height: 100%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    } 
 
    :hover{ 
 
    background-color: $gray-lightest; 
 
    cursor: pointer; 
 
    } 
 
}

あなたが見ることができるように、私は、プロフィール画像を垂直centererdさせることはできません。私が管理していれば、カードの内容は中央にない。 また、カードの長さがカードの固定幅を超えたらすぐにレイアウト全体をネジ止めするので、長めの場合でもユーザー名をカードに収めるのが良い解決策ではないかと思います。

誰かがこれを解決する方法を考えていることを願っています。 ありがとうございます！

Answer 1

問題は、あなたが

.card.user-card { 
     display: table; 
} 
.card-block { 
     display: table-row; 
} 
.user-card-image { 
    display: table-cell; 
    vertical-align: middle; 
    padding: 20px; 
    border: 1px solid #e6e6e6; 
} 
.user-card-content { 
     display: table-cell; 
    vertical-align: middle; 
    padding: 20px; 
    border: 1px solid #e6e6e6; 
} 

https://jsfiddle.net/xq7hwvdg/

Answer 2

アリの答えは、私はより多くの実験と私は最終的に管理、まだ作っカードブロックはそれ以来のソリューションを波平作られた、このリンクをご確認くださいdivの表スタイルを使用する必要が解決しますそれはカードの全幅を満たすことになると問題に繋がる。テーブルセルの％幅の値を設定するとうまくいくでしょう。

問題は、.card-blockのあらかじめ設定されたパディングであるように見えました。上と下のパディングを上書きする必要がありました。テーブルとテーブルセルは期待通りに動作しました（テーブル行を使用せずに）。

$user-card-width: 300px; 
 
$user-card-height: 130px; 
 

 
.user-card{ 
 
    height: $user-card-height; 
 
    width: $user-card-width; 
 
    max-width: $user-card-width; 
 
    overflow: hidden; 
 
    .card-block{ 
 
    padding: 0rem 1.25rem; 
 
    } 
 
    .user-card-image{ 
 
    padding-right: 15px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: $user-card-height; 
 
    } 
 
    .user-card-content{  
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: $user-card-height; 
 
    } 
 
    :hover{ 
 
    background-color: $gray-lightest; 
 
    cursor: pointer; 
 
    } 
 
}