Text arranged in a vertical orientation with a group of text aligned along the baseline

Question

Text arranged in a vertical orientation with a group of text aligned along the baseline

I am trying to create the following layout:

https://i.sstatic.net/HYNDw.png

Here is what I need:

The word total and the number 120 should align vertically in the center
The words per month should align at the bottom with respect to the number 120
The word group 120 and per month should be right aligned (utilizing float:right in the css class 'incident-container')

I tried using the css style display:table-cell. While it addressed point 3, vertical alignment as mentioned in point 1 did not work.

You can view a demo of my code on jsfiddle here: http://jsfiddle.net/kongakong/151eprrk/

The current output looks like this:

https://i.sstatic.net/utmh9.png

An answer on Stack Overflow (Vertically centering a div inside another div) suggests using flex for center alignment.

I made the following attempt based on that suggestion: http://jsfiddle.net/kongakong/151eprrk/4/

However, it still does not produce the desired outcome:

https://i.sstatic.net/tzWgj.png

If anyone can identify what is incorrect or lacking, please let me know.

css

Answer 1

Answer №1

You were heading in the right direction. Just a couple of tweaks are required.

Avoid using table-cell for the inner divs. Switch to inline-block.
No need for float if you are employing a table layout.
Delete the width attribute from the .frequency class.
You should use vertical-align: baseline instead of bottom.

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

Snippet Preview:

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

Answer 2

You were heading in the right direction. Just a couple of tweaks are required.

Avoid using table-cell for the inner divs. Switch to inline-block.
No need for float if you are employing a table layout.
Delete the width attribute from the .frequency class.
You should use vertical-align: baseline instead of bottom.

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

Snippet Preview:

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

Answer 3

Answer №2

Here is a solution for your issue -

JSbin Demo

* {
  margin: 0;
  padding: 0;
}
.main {
  background: blue;
  overflow: hidden;
  padding: 20px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.left span {
  line-height: 50px;
}
.right strong {
  font-size: 28px;
}
.right span {
  font-size: 16px
}

<!DOCTYPE html>
<html>

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

<body>

  <div class="main">
    <div class="left">
      <span>Overall</span>
    </div>
    <div class="right">
      <strong>150</strong>
      <span>per year</span>
    </div>
  </div>

</body>

</html>

Answer 4

Here is a solution for your issue -

JSbin Demo

* {
  margin: 0;
  padding: 0;
}
.main {
  background: blue;
  overflow: hidden;
  padding: 20px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.left span {
  line-height: 50px;
}
.right strong {
  font-size: 28px;
}
.right span {
  font-size: 16px
}

<!DOCTYPE html>
<html>

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

<body>

  <div class="main">
    <div class="left">
      <span>Overall</span>
    </div>
    <div class="right">
      <strong>150</strong>
      <span>per year</span>
    </div>
  </div>

</body>

</html>

Answer 5

Answer №3

Check out the solution on Fiddle

To fix the issue, I made adjustments to the CSS by adding a line-height property to the .incident class and a padding-top property to the .frequency class.

.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; /* Added line-height */
}
.frequency {
  display: table-cell;
  //align-self: center;
  width: 75px;
  padding-right: 10px;
  vertical-align: middle;
  font-size: 12px;
  padding-top: 10px; /* Added padding top */
}

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

Answer 6

Check out the solution on Fiddle

To fix the issue, I made adjustments to the CSS by adding a line-height property to the .incident class and a padding-top property to the .frequency class.

.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; /* Added line-height */
}
.frequency {
  display: table-cell;
  //align-self: center;
  width: 75px;
  padding-right: 10px;
  vertical-align: middle;
  font-size: 12px;
  padding-top: 10px; /* Added padding top */
}

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

Text arranged in a vertical orientation with a group of text aligned along the baseline

Answer №1

Answer №2

Answer №3

Similar questions

Trouble with background image displaying on meteor platform

Adjust the element colors within a Vue loop with dynamic changes

Looking for a reliable tool to check your CSS classes and tidy up your code effectively?

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

What can I do to adjust the position of the div wrapper if the floating sidebar is taller than

What is the best way to incorporate two banners on the Magento homepage alongside my flexslider?

What is the best way to add two hyperlinks within a single tab of a Bootstrap navigation menu?

Variations in functionality within the Google Chrome browser

Unable to adjust font for headings using CSS and Bootstrap

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

What is the best way to connect a line from the edge of the circle's outermost arc?

Creating a persistent table header and first column in HTML tables

Pop-up alert for text sections that are longer than a specific character limit

Ways to enhance the appearance of the parent element when the radio button is clicked

Responsive CSS images with overlays

The footer has a wandering nature, constantly moving around as the wrapper mysteriously vanishes

Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

What is the best way to implement CSS in this JavaScript Fetch code in order to manipulate the text's position and font style

Create a 3D vertical flip effect for images using CSS

Excessive margin-left values for CSS div positioning are simply outlandish