Vertically aligned text with baselined text group

Question

This is the layout I want to create

In essence:

Word total and number 120 should align vertically in the center
Words per month should align at the bottom w.r.t number 120
The word group 120 and per month should be right aligned (hence the use of float:right in css class 'incident-container')

I started with this css style display:table-cell. It addressed point 3. However point 1 is not achieved. The vertical alignment does not work.

Demo code can be found here on jsfiddle: http://jsfiddle.net/kongakong/151eprrk/

It looks like this:

According to a SO answer (Vertically centering a div inside another div), I can use flex to achieve center alignment.

This is my next attempt: http://jsfiddle.net/kongakong/151eprrk/4/

But it still does not work as I expected:

Can anyone point out what is wrong or missing?

score 2 · Accepted Answer · answered Nov 18 '15 at 07:35

You were on the right track. Just a few fixes needed.

No need for table-cell on the inner divs. inline-block will do.
No need for float when you are using a table layout.
Remove width from the .frequency.
You are looking for vertical-align: baseline instead of bottom.

Updated Fiddle: http://jsfiddle.net/abhitalks/151eprrk/5/

Snippet:

.incident-banner {
    display: inline-table;
    color: white; background: lightblue;
    margin-top: 20px; width: 100%; height: 75px;
}
.text { display: table-cell; vertical-align: middle; padding: 10px 20px; }
.incident-container {
    display: table-cell; vertical-align: middle; text-align: right;
    padding: 10px 20px;
}
.incident { display: inline-block; vertical-align: baseline; font-size: 40px; } 
.frequency {
    display: inline-block; vertical-align: baseline;
    font-size: 12px;
}

<div class="incident-banner">
    <div class="text">Total</div>
    <div class="incident-container">
        <div class="incident">120</div>
        <div class="frequency">per month</div>
    </div>
</div>

score 1 · Answer 2 · edited Nov 18 '15 at 07:33

Try this code for your problem -

JSbin Demo

* {
  margin: 0;
  padding: 0;
}
.main {
  background: red;
  overflow: hidden;
  padding: 20px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.left span {
  line-height: 40px;
}
.right strong {
  font-size: 32px;
}
.right span {
  font-size: 12px
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <div class="main">
    <div class="left">
      <span>Total</span>
    </div>
    <div class="right">
      <strong>120</strong>
      <span>per month</span>
    </div>
  </div>

</body>

</html>

score 0 · Answer 3 · edited Nov 18 '15 at 07:39

Fixed here Fiddle

I just added line-height property on .incident & padding-top property on .frequency

.incident-banner {
  display: inline-table;
  color: white;
  background: lightblue;
  margin-top: 20px;
  width: 100%;
  height: 75px;
}
.text {
  display: table-cell;
  vertical-align: middle;
  padding: 10px 20px;
}
.incident-container {
  // display: flex;
  display: table-cell;
  float: right;
  vertical-align: middle;
}
.incident {
  display: table-cell;
  // display: inline-block;
  // align-self: center;
  text-align: right;
  vertical-align: middle;
  font-size: 40px;
  line-height: 75px;
}
.frequency {
  display: table-cell;
  //align-self: center;
  width: 75px;
  padding-right: 10px;
  vertical-align: middle;
  font-size: 12px;
  padding-top: 10px;
}

<div class="incident-banner">
  <div class="text">Total</div>
  <div class="incident-container">
    <div class="incident">120</div>
    <div class="frequency">per month</div>
  </div>
</div>

Vertically aligned text with baselined text group

3 Answers3