text in
can't go vertically middle

Question

Trying to make the choice_result_text vertically align in the middle. The span successfully vertically aligns in the middle but not the p. Any idea? Code:

.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>

Did yo read this post? [Vertically Align of the Text in a Paragraph Element to Middle](http://stackoverflow.com/questions/11051951/vertically-align-of-the-text-in-a-paragraph-element-to-middle) — Tudu, Feb 15 '17 at 06:48
Possible duplicate of [How can I vertically center text in a dynamically height div?](http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-height-div) — Luzan Baral, Feb 15 '17 at 06:49
Oh wait I tried `line height` and it worked. No worries, thanks. — Zorgan, Feb 15 '17 at 06:50
Possible duplicate of [Vertically Align of the Text in a Paragraph Element to Middle](http://stackoverflow.com/questions/11051951/vertically-align-of-the-text-in-a-paragraph-element-to-middle) — caramba, Feb 15 '17 at 06:51

score 1 · Answer 1 · answered Feb 15 '17 at 06:50

1

You could add

line-height: 42px;

to

.poll_results .choice_result p.choice_result_text

answered Feb 15 '17 at 06:50

Asier Azkuenaga

1,199
6
17

Thanks line-height works. But would you know why when i do this, it doesn't allow `p` to auto make a new line when the text goes past the width? – Zorgan Feb 15 '17 at 07:37
I believe it is due to the height of the p element. It is fixed to 39px. – Asier Azkuenaga Feb 15 '17 at 07:41
But even when I change my font-size to 10px, it still doesn't create a new line. It just doesn't show the 2nd/3rd word – Zorgan Feb 15 '17 at 07:42
You are getting in a loop here. The line-height is taking the p elements height so the font size changes do not affect the heght taken by the text. – Asier Azkuenaga Feb 15 '17 at 07:47

caramba · Accepted Answer · 2017-02-15T07:06:00.893

If there is always enough space for width you could cheat the vertical middle by setting the line-height to the elment height:

looks like so:

.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>

Yep just tried `line height` equal to the `height` and it works, thanks. — Zorgan, Feb 15 '17 at 06:51

text in can't go vertically middle

2 Answers2

text in
can't go vertically middle