<p> 中的文本不能垂直居中答案

【问题标题】：text in <p> can't go vertically middle<p> 中的文本不能垂直居中
【发布时间】：2017-07-03 16:43:34
【问题描述】：

试图使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>

【问题讨论】：

你读过这篇文章吗？ Vertically Align of the Text in a Paragraph Element to Middle
是的，使用display: table-cell 搞砸了一切
How can I vertically center text in a dynamically height div?的可能重复
哦，等等，我试过line height，它成功了。不用担心，谢谢。
Vertically Align of the Text in a Paragraph Element to Middle的可能重复

标签： html css

【解决方案1】：

你可以添加

line-height: 42px;

到

.poll_results .choice_result p.choice_result_text

【讨论】：

感谢行高工作。但是你知道为什么当我这样做时，它不允许p 在文本超过宽度时自动换行吗？
我相信这是由于 p 元素的高度。它固定为 39 像素。
但即使我将字体大小更改为 10px，它仍然不会创建新行。它只是不显示第二个/第三个单词
你在这里陷入了循环。 line-height 采用 p 元素的高度，因此字体大小的变化不会影响文本的高度。

【解决方案2】：

如果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>

【讨论】：

是的，刚刚尝试了 line height 等于 height，它可以工作，谢谢。