css - Bootstrap v4 - 制作垂直对齐的用户名片

Question

尽管它仍然是 alpha，但我决定为我当前正在处理的网站使用 bootstrap。 作为我网站的一个重要元素，我想制作“商业”卡片来显示用户的基本信息，基于新的卡片类 bootstrap。 不幸的是，我无法让这些卡片看起来完全符合我的要求。

这就是我希望它们的样子: layout

这是目前的样子: attempt

那是我的代码:

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

以及它的 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;
  }
}

如您所见，我无法让个人资料图片垂直居中。如果我管理，卡片的内容不会居中。 另外，我想知道将用户名放入卡片中的好的解决方案是什么，即使它很长，因为一旦它的长度超过卡片的固定宽度，它就会搞砸整个布局。

希望有人知道如何解决这个问题。 提前致谢!

Answer 1

问题解决了你必须使用div表格样式

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