Bootstrap如何实现右侧垂直居中90度旋转文本与竖排五星布局

开发场景 #

用Bootstrap4开发卡片式页面布局时，要在卡片最右侧做独立窄列，列内结构从上到下为：顶部放置带白底阴影的Google图标、下方区域实现旋转90度的"Google Review"文本与垂直排列的5个Font Awesome星级图标整体垂直居中。当前开发卡点：窄列内的旋转文本与星级组始终没法适配剩余空间做垂直居中，位置错位。

现有已编写代码 #

自定义CSS #

.contact-card {
    background-color: #88206D;
    border: solid 2px #fff;
    border-radius: 21px;
    min-height: 406px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 6px 6px 9px 0px rgba(0,0,0,0.5);
}
#google-icon img {
    height: 44px;
    z-index: 1000;
    background-color: #fff;
    padding: 5px;
    border-radius: 22px;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.53);
    -webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.53);
    -moz-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.53);
}
.google-review {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

页面HTML结构 #

<!-- 外部依赖引入 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<main>
  <div class="container">              
    <div class="row contact-card">  
      <div class="map col-5" id="map"></div>
      <div class="offset-2 image-scroll"></div>
      <div class="map-des col-3 text-white my-auto pt-4" id="m-des"></div>
      <!-- 待调整的Google评价模块 -->
      <div class="col-1 text-center">
        <div id="google-icon">
          <img src="https://i.ibb.co/nknMt4k/search.png" class="google-icon">    
        </div>  
        <div class="side-star">
          <p class="google-review text-nowrap">
            <strong>Google Review</strong>
          </p>
          <div class="five-star d-flex flex-column">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

问题原因与修复方案 #

• 根因1：最右侧的窄列容器没有设置纵向Flex布局，顶部Google图标占完固定高度后，下方的side-star容器不会自动撑满剩余空间，内部元素自然没法实现垂直居中。
• 根因2：旋转Google Review文本时没有设置统一的旋转原点，旋转后元素会发生位置偏移，和垂直排列的星级组错位。
• 修复操作：
  1. 修改右侧窄列的类名，把col-1 text-center改为col-1 d-flex flex-column align-items-center，让列内元素按纵向排列。
  2. 给side-star容器追加类flex-grow-1 d-flex align-items-center justify-content-center，让这个容器自动占满Google图标以下的全部剩余高度，内部的旋转文本和星级组自然就落在剩余空间的垂直中心位置。
  3. 给.google-review类补充两个属性：标准的transform: rotate(90deg)兼容所有浏览器，以及transform-origin: center center固定旋转中心，消除旋转带来的位置偏移。

内容的提问来源于stack exchange，提问作者Stay Foolish