All geek questions in one place

Vertically aligned text with a baseline of text

This is the layout I want to create.

enter image description here

Essentially:

  • The word totaland number 120should be centered vertically
  • Words per monthmust align at the bottom wrt, number 120
  • A group of words 120and per monthshould be aligned right (therefore, the use of an float:right"incident container" in the css class)

I started with this css style display:table-cell. He touched point 3. However, point 1 was not reached. Vertical alignment does not work.

The demo code can be found here: jafiddle: http://jsfiddle.net/kongakong/151eprrk/

It looks like this:

enter image description here

SO ( div div), flex .

: http://jsfiddle.net/kongakong/151eprrk/4/

- , :

enter image description here

- , ?

+4
3

. .

  • table-cell div. inline-block.
  • float .
  • .frequency.
  • vertical-align: baseline bottom.

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

:

.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>
Hide result
+2

-

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>
Hide result
+1

Fixed here fiddle

I just added a property line-heightin properties .incidentand padding-topon.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>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1616319/

More articles:


All Articles