html - 中的文本不能垂直居中

Question

尝试使 choice_result_text 在中间垂直对齐。 span 成功地在中间垂直对齐，但 p 却没有。任何想法？代码:

.poll_results .choice_result {
  margin-bottom: 3px;
  height: 42px;
  width: 100%;
}
.poll_results .choice_result p.choice_result_text {
  float: left;
  height: 39px;
  background-image: linear-gradient(#4d4d4d, #262626);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  color: #fff;
  font-size: 15px;
  border-radius: 2px 0 0 2px;
  text-align: center;
  border: 1px solid #333;
}
.choice_result_middle {
  float: left;
  height: 39px;
  background-image: linear-gradient(#3366cc, #1f3d7a);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  min-width: 30%;
  color: #fff;
  font-size: 15px;
  border-radius: 0 2px 2px 0;
  text-align: left;
  border: 1px solid #333;
  margin-right: 7px;
  border-left: none;
}
.poll_results .choice_result span {
  float: left;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="poll_results">

  <div class="choice_result" data-choice_percent="10">
    <p class="choice_result_text">Yes</p>
    <p class="choice_result_middle"></p>
    <span>10%</span>
  </div>

  <div class="choice_result" data-choice_percent="35">
    <p class="choice_result_text">No</p>
    <p class="choice_result_middle"></p>
    <span>35%</span>
  </div>

  <div class="choice_result" data-choice_percent="54">
    <p class="choice_result_text">Yet to see</p>
    <p class="choice_result_middle"></p>
    <span>54%</span>
  </div>

  <p class="total_votes">Total Votes: 0</p>
</div>

Answer 1

如果 width 总是有足够的空间，您可以通过将 line-height 设置为元素高度来欺骗垂直中间:

看起来像这样:

.poll_results .choice_result {
    margin-bottom: 3px;
    height: 42px;
    width:100%;

}
.poll_results .choice_result p.choice_result_text {
    float: left;
    height: 39px;
    line-height: 39px; /* only change here */
    background-image: linear-gradient(#4d4d4d, #262626);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    color: #fff;
    font-size: 15px;
    border-radius: 2px 0 0 2px;
    text-align: center;
    border: 1px solid #333;
}
.choice_result_middle {
    float: left;
    height: 39px;
    background-image: linear-gradient(#3366cc, #1f3d7a);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    min-width: 30%;
    color: #fff;
    font-size: 15px;
    border-radius:0 2px 2px 0;
    text-align: left;
    border: 1px solid #333;
    margin-right: 7px;
    border-left:none;
}
.poll_results .choice_result span {
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);

}

<div class="poll_results">

        <div class="choice_result" data-choice_percent="10">
            <p class="choice_result_text">Yes</p><p class="choice_result_middle"></p>
            <span>10%</span>
        </div>

        <div class="choice_result" data-choice_percent="35">
            <p class="choice_result_text">No</p><p class="choice_result_middle"></p>
            <span>35%</span>
        </div>

        <div class="choice_result" data-choice_percent="54">
            <p class="choice_result_text">Yet to see</p><p class="choice_result_middle"></p>
            <span>54%</span>
        </div>

    <p class="total_votes">Total Votes: 0</p>
</div>