Question

我有一个网站，用户可以在其中评分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，但没有任何反应。

Answer 1

我尝试在图形容器类上使用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>

我如何在此内联元素垂直居中？

1 个答案: