时间戳

首页 > 解决方案 > 我怎样才能垂直居中这个内联元素？

html - 我怎样才能垂直居中这个内联元素？

问题描述

我有一个网站，用户可以在其中对某项内容进行评分，从 1 星到 5 星不等，信息显示在条形图上。图表旁边是用户单击以留下评分的星星。它看起来像这样：

.ratings-container {
  /*background-color: orange;*/
  font-family: tahoma;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

.ratings-container h3 {
  padding-bottom: 20px;
}

.graph-container {
  /*background-color: blue;*/
  width: 100%;
}

.graph {
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  display: inline-flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  width: 66%;
  /*background-color: red;*/
}

.graph div {
  width: 12%;
  height: 1px;
  background-color: black;
}

#feedback-thanks {
  display: none;
  transition: 0.5s;
  padding-top: 20px;
}

.star-container {
  width: 25%;
  /*background-color: blue;*/
  margin-top: 100px;
  font-size: 0;
  display: inline;
  position: relative;
}

.star {
  width: 50px;
  height: auto;
  cursor: pointer;
  transition: 0.3s;
}
<div class="ratings-container">
    <h3 style="font-family: Georgia" id="ratings-heading">RATE YOUR STAY</h3>
    <div class="graph-container">
      <div class="graph">
        <div id="bar5"></div>
        <div id="bar4"></div>
        <div id="bar3"></div>
        <div id="bar2"></div>
        <div id="bar1"></div>
      </div>
      <div class="star-container">
        <img class="star" id="star1" src="./star.jpg">
        <img class="star" id="star2" src="./star.jpg">
        <img class="star" id="star3" src="./star.jpg">
        <img class="star" id="star4" src="./star.jpg">
        <img class="star" id="star5" src="./star.jpg">
      </div>
    </div>
 </div>

然而，星星位于图表的右下角。我希望它们在图表高度的一半处。我尝试vertical-align在父容器 ( graph-container) 中使用，但没有任何反应。

标签： htmlcss

解决方案

我尝试使用 Flexbox，display: flex在align-items: center;图形容器类上，这就是你想要的？

.ratings-container {
  /*background-color: orange;*/
  font-family: tahoma;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

.ratings-container h3 {
  padding-bottom: 20px;
}

.graph-container {
  /*background-color: blue;*/
  width: 100%;
  display: flex;
  align-items: center;
}

.graph {
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  display: inline-flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  width: 66%;
  /*background-color: red;*/
}

.graph div {
  width: 12%;
  height: 1px;
  background-color: black;
}

#feedback-thanks {
  display: none;
  transition: 0.5s;
  padding-top: 20px;
}

.star-container {
  width: 25%;
  height: 50px;
  font-size: 0;
}

.star {
  width: 50px;
  height: auto;
  cursor: pointer;
  transition: 0.3s;
}
<div class="ratings-container">
    <h3 style="font-family: Georgia" id="ratings-heading">RATE YOUR STAY</h3>
    <div class="graph-container">
      <div class="graph">
        <div id="bar5"></div>
        <div id="bar4"></div>
        <div id="bar3"></div>
        <div id="bar2"></div>
        <div id="bar1"></div>
      </div>
      <div class="star-container">
        <img class="star" id="star1" src="./star.jpg">
        <img class="star" id="star2" src="./star.jpg">
        <img class="star" id="star3" src="./star.jpg">
        <img class="star" id="star4" src="./star.jpg">
        <img class="star" id="star5" src="./star.jpg">
      </div>
    </div>
 </div>

推荐阅读