CSS: Vertically align texts in two consecutive DIVs to the same baseline

Question

css

A task has arisen that is slowly but surely blowing my mind.

I will immediately give a link to an example in the sandbox

. There is a container in which 3 DIVs (float: left / left / right) are located, in which there are several inline elements (span, label, select, a). As long as the font size of all elements is the same, they are perfectly positioned vertically relative to each other. But if you increase the font size somewhere, then they begin to fall apart vertically, as the overall baseline is lost.


Any tricks with line-height, vertical align do not give a tangible result. I see several solutions, but none of them shine with beauty:
— absolute vertical positioning — a very fragile structure is obtained, which falls apart when any font parameters are changed (size, typeface, ...), and is also subject to system and browser settings;
- selection of numerical values ​​in vertical-align, - similar problems;
- rejection of 3 DIVs inside the container, - there is clearly a baseline, but there will be problems with the horizontal positioning of blocks and extensibility (the interface provides for the possibility of skinnization).

There are 2 questions on the agenda:
1. Is it possible in this case, without changing the structure, to “suggest” the browser a common baseline for these 3 DIVs?
2. How can the problem be solved with maximum support for semantics and minimum loss of further extensibility and customization?

Answer 1

To create a "general baseline", set the same line-height to the divs. In the picture 30px, you can also set it in em. Remove inline-blocking where it is not needed, remove or correct the default padding of form elements, align them vertically.

Answer 2

The problem here is float:XXX - before the float is assigned, the element becomes a block. And block elements cannot be aligned to a common baseline. Unfortunately, the usual 'line-height' is indispensable, since each block will still have its own baseline, except to select different line-height + "element1 line-height 1em != element2 line-height 1em due to different fonts" -size". Or I'm wrong?
I would suggest display:table-cell;
.replies-summary>div{float:none; display:table-cell; white-space:nowrap;}
.replies-summary>div:nth-child(3){ width:100%; text-align:right; font-size:3em;}


Answer 3

I would be grateful if you correct the example without specifying line-height for each (+ by eye) link block