-1

I'm trying to place two divs (.health-icon and .health-description) side-by-side, but horizontally center them inside .health-status. I was able to do this.

However, they're not properly vertically aligned. I need .health-description line-height to be the same size of the .ranking. But it seems that .health-description is a little bit lower than .health-icon.

.health-status {
  text-align: center;
  margin: 0 auto;
}
.health-icon {
  display: inline-block;
}
.health-description {
  display: inline-block;
  line-height: 70px;
  font-weight: bold;
}
.rating-circle {
  height: 70px;
  width: 70px;
  border-radius: 250px;
  font-size: 36px;
  font-weight: 700;
  color: white;
  line-height: 65px;
  text-align: center;
  background: #2c3e50;
  /*float: left;*/
  display: inline-block;
  /*margin-right: 20px;*/
  padding-left: 2px;
  padding-top: 2px;
}
<div class="panel-body">
  <div class="health-status">
    <div class="health-icon">
      <div id="rating" class="rating-circle sq-orange" data-role="status-name">A</div>
    </div>
    <div class="health-description">UTI</div>
  </div>
  <div class="minidash">
    <section class="row">
      <div class="card col-md-6">
        <div class="value">123.456</div>
        <div class="name">Porte</div>
      </div>
      <div class="card col-md-6">
        <div class="value">-435,0</div>
        <div class="name">Variação de Curto Prazo</div>
      </div>
    </section>
  </div>
</div>

http://jsfiddle.net/n1o8uvcv/1/

EDIT

This is different from How to horizontally center a <div> in another <div>?, where the focus is to horizontally center a div inside another. This is already solved here. What happens is that when I use the inline-block display, the two divs are not correctly vertically aligned.

Community
  • 1
  • 1
João Daniel
  • 8,696
  • 11
  • 41
  • 65
  • 1
    Include your code here – Wes Foster Oct 20 '15 at 17:00
  • I'm having trouble understanding what is not correct for you. When I view the jsfiddle, the baseline of the rating and the description appears to be the same. You're saying one is lower than the other? Is there a specific browser or screen size you are using? – J E Carter II Oct 20 '15 at 17:29
  • Yes @JECarterII, I'm using Chrome. The text base line is some pixels lower than the circle. Both are 70px in height, but the text top and bottom are lower than the circle top and bottom. – João Daniel Oct 20 '15 at 20:18
  • It may be a local artifact. Check your zoom level, etc. I used a screen shot here and found the baselines in Chrome are exactly the same row of pixels. – J E Carter II Oct 20 '15 at 20:38

1 Answers1

0

This is an extremely specific question so i'll give an answer that is not usable to general cases.

Change your health-description class to this: 

.health-description {
    display: inline-block;
    transform: translate(0, -30%);
}
Persijn
  • 14,624
  • 3
  • 43
  • 72
  • Indeed, this answer cannot be used in general cases. It looses the alignment as soon as I resize the container. – João Daniel Oct 20 '15 at 17:10
  • if you want to have a RESPONSIVE design you will have to re think your markup or simple use an image for the icon and not a css solution – Persijn Oct 21 '15 at 11:23