CSS Inline Alignment

Published: 2017-07-14
Updated: 2017-07-14
Web: https://fritzthecat-blog.blogspot.com/2017/07/css-centering-in-line.html

Some things are so complicated that you do not want to go into them. I really appreciate that there are people that do this, and leave us a trace of what we could do to mitigate our daily problems with web browser CSS. Try to read this article about inline-formatting (link).

This Blog is about problems that you meet when you care about text alignment, that means you want to center everything vertically, even text in tables.

Example

The situation I want to talk about is having a table with a constant row height, and various contents inside. Let it look like this:

C
entering not done here
!

Source code is here: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Aligning Inline Text</title>
  
  <style type="text/css">
    div.box  {
      border: 1px solid gray;
      height: 80px;
    }
  </style>
  
</head> 
<body>

  <table style="vertical-align: initial;">
    <tr>
      <td>
        <div class="box" style="font-size: 40px;">C</div>
      </td>
      <td>
        <div class="box">entering not done here</div>
      </td>
      <td>
        <div class="box" style="font-size: 60px;">!</div>
      </td>
    </tr>
  </table>
  
</body>
</html>

The browser calculates the table's row height from its highest cell, and all cells have been set to 80 pixels by the CSS rule div.box in head styling.

The 1st column contains a "C" of 40 pixels font-size, the text in 2nd column has default size, and the biggest "!" text is in 3rd column, having 60 pixels.

1st and 2nd column display a little bit strange, hanging on top. Should we change that? Maybe not when it is a multiline text, because it can extend to bottom then. When it is single-line, yes, it may look better then. So let's try, we are all CSS Gurus. We have our secret weapon, the CSS property ....

Vertical-align: middle

Add this to the style element in head ... 

    .valign  {
      vertical-align: middle;
    }

... and CSS class valign to the table cells: 

  <table style="vertical-align: initial;">
    <tr>
      <td>
        <div class="valign box" style="font-size: 40px;">C</div>
      </td>
      <td>
        <div class="valign box">entering not done here</div>
      </td>
      <td>
        <div class="valign box" style="font-size: 60px;">!</div>
      </td>
    </tr>
  </table>

Here is how this looks:

C
entering not done here
!

Not very much changed. What about the secret weapon :-?

So let's fix it with CSS property line-height.

Line-height: same as table row


  .lineheight  {
    line-height: 80px;
  }

Add CSS class to elements: 

  <table style="vertical-align: initial;">
    <tr>
      <td>
        <div class="lineheight box" style="font-size: 40px;">C</div>
      </td>
      <td>
        <div class="lineheight box">entering not done here</div>
      </td>
      <td>
        <div class="lineheight box" style="font-size: 60px;">!</div>
      </td>
    </tr>
  </table>

Now it looks like this:

C
entering not done here
!

Ways better! Secret is to ...

Set the line-height to the same value as the row height!

DIV table

Unfortunately this behaves differently in DIV elements with display: table, also called "CSS tables". Here it is: 

  <div style="display: table; ">
    <div style="display: table-row;">
      <div class="lineheight box" style="display: table-cell; font-size: 40px;">C</div>
      
      <div class="lineheight box" style="display: table-cell;">entering not done here</div>
      
      <div class="lineheight box" style="display: table-cell; font-size: 60px;">!</div>
    </div>
  </div>

And it looks like this:

C
entering not done here
!

Ooops! I'm not talking about the now missing gaps between the boxes. The text in 2nd column is dropped to baseline, and the "!" in 3rd column has lifted up. Further the whole thing seems to have a bigger height - ?

So maybe here the secret weapon vertical-align works? Lets try: 

  <div style="display: table; ">
    <div style="display: table-row;">
      <div class="valign box" style="display: table-cell; font-size: 40px;">C</div>
      
      <div class="valign box" style="display: table-cell;">entering not done here</div>
      
      <div class="valign box" style="display: table-cell; font-size: 60px;">!</div>
    </div>
  </div>

Looks like this:

C
entering not done here
!

Here I stop. I don't want to dive into this. In case you have read the article I recommended at beginning, you may have noticed this sentence:

To be honest, no matter what you choose, you’ll always have trouble with inline alignments.

HTML TABLE

C
entering not done here
!
C
entered by vertical-align: middle
?
C
entered by line-height
?

CSS DIV TABLE

C
entering not done here
!
C
entered by vertical-align: middle
?
C
entered by line-height
?



ɔ⃝ Fritz Ritzberger, 2017-07-14