Aligning text of different sizes in different divs

Question

I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.

I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.

Link to Demo

Welcome to stackoverflow, please always add the relevant code to your question and have a look at [why you shouldn't just post a link to your website.](http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) — Marcel Gwerder, Aug 24 '13 at 22:06
Some feedback on the answers would be delightful, we'd like to know whether or not we helped you — Zach Saucier, Aug 25 '13 at 00:43

Zach Saucier · Answer 1 · 2013-08-24T22:04:38.533

Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately

#artist { /* Selector to affect all the elements you want */
    color: #000;
    font-size: 18px; /* Default font size */
    line-height:18px; /* Line height of largest font-size you have so none go */
                      /* above the top of their container                     */
}

Demo

score 0 · Accepted Answer · answered Aug 24 '13 at 21:56

0

You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.

I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

answered Aug 24 '13 at 21:56

Jeffpowrs

4,430
4
30
49

This was very helpful. Thank you Jeff for pointing me in the right direction. From your referenced article "the CSS line-height property doesn’t have an inherent concept of baseline, and each line of text is placed roughly in the middle of the element’s total height. This means that perfectly aligning the actual base of your text (which is to say the baseline) across different styles and fonts requires further manual, time-consuming tweaking and pixel nudging." – user2714240 Aug 25 '13 at 03:30
You're welcome! Sometimes it just comes down to trial and error unfortunately. Good Luck! – Jeffpowrs Aug 25 '13 at 03:33

score 0 · Answer 3 · answered Aug 24 '13 at 22:11

Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/

 #artist {

     padding: 5px;

     float: left;

     width: 100%;

     background-color: #036;

     color: #000;

     font-size: 18px;

     overflow: hidden;

 }

 .genre {

     width: 5em;

     float:left;

     height: 50px;

     background-color: #09F;

 }

 .genre p {

     padding:5px 5px;

 }

 .artistName {

     float: left;

     width: 175px;

     height: 50px;

     background-color: #F39;

 }

 .artistName p {

      padding:5px 5px;

 }

 .birth {

     float: left;

     width: 5em;

     height: 50px;

     font-size: 12px;

     background-color: #F90;

 }

 .birth p {

     padding:15px 5px;

 }

 .medium {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #099;

 }

 .medium p {

      padding:15px 5px;

 }

 .gallery {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #FF6;

 }

 .gallery p {

    padding:15px 5px;

 }

 .website {

     float: left;

     width: 10em;

     height: 50px;

     font-size: 12px;

     background-color: #99F;

 }

 .website p {

      padding:15px 5px;

 }


<div id="artist">
    <div class="genre">
        <p>Genre</p>
    </div>
    <div class="artistName">
        <p>Artist First Last</p>
    </div>
    <div class="birth">
        <p>birth year</p>
    </div>
    <div class="medium">
        <p>medium</p>
    </div>
    <div class="gallery">
        <p>gallery name</p>
    </div>
    <div class="website">
        <p>website</p>
    </div>
</div>

score 0 · Answer 4 · edited May 23 '17 at 12:28

I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.

The gist of it is the following:

Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.

Aligning text of different sizes in different divs

4 Answers4