在文本垂直居中的情况下定位在右侧也会将文本旋转90度，同时阻止<img><i>
在文本垂直居中的情况下定位在右侧也会将文本旋转90度，同时阻止<img><i>
提问于 2021-05-05 12:57:24
我正在使用Bootstrap
我一直在尝试添加一列<img-top right-aligned> [<p-rotated 90 degree><i star symbol>*5(arranged vertically)]
你可能不理解上面的行，我将在下面添加我正在寻找的截图
但我正在苦苦挣扎，我需要谷歌评论文本和5星字体的令人敬畏的符号垂直居中。
.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);
}<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>
<!-- i struggle in this part -- >
<!-- google reviews -->
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-05 13:14:15
使用display: flex和align-items: center：
.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);
margin-top: 24px;
margin-bottom: 60px;
}
.google-review {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-bottom: 60px;
}
.col-1 {
display: flex;
flex-direction: column;
align-items: center;
}<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>
<!-- i struggle in this part -- >
<!-- google reviews -->
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67395394
复制相关文章
相似问题
腾讯云开发者
