Skip navigation

The Battle Over Centering on the Longest Line in CSS

There are a lot of things easy to do in print that web designers struggle to emulate when they take print designs to the web. One of those challenges is centering text on the longest line.

Clagnut takes on “centering text on the longest line” to show you how to make this almost impossible task possible with CSS.

The Web Typography project continues to proceed, albeit at a glacial pace. One of the reasons for the slow progress is guidelines such as this: “to distinguish verse quotations from surrounding prose, they should be […] centered on the longest line.”

An uncommon request, but it sounds straightforward enough. Don’t let that fool you. Centering a block is reasonably simple if you know how wide it is…But if you don’t know how wide your block – perhaps you’re drawing text from a CMS – then things get tricky.

The solution isn’t as easy as it sounds, and even Clagnut found this was more complicated than originally posted. To make this happen, you need a different solution for different browsers. So the browser-specific battle with CSS development continues.

Have you found a better solution?

Site Search Tags: , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network Feed on Lorelle on WordPress Subscribe

Member of the 9Rules Blogging Network


  1. Posted March 16, 2007 at 11:53 am | Permalink


    I know it’s not an option, but I enjoyed this post on the business case for forcing your customers to only use one web browser.

    It isn’t realistic when your customers are “the public” but it’s something to remember when developing in-house applications — if you can standardize on one browser for internal corporate applications then it’s a good idea to do so.

  2. Posted March 16, 2007 at 3:06 pm | Permalink

    Clagnut writes a beautiful English too 😉

    I noticed that he uses “estimable” about some Steve.
    Isn’t that fairly unusual?

    Elegant or eloquent, is that what you’d call it ?
    As you know, I’m a little bit Swedish, so I can’t help it.

3 Trackbacks/Pingbacks

  1. […] The Battle Over Centering on the Longest Line in CSS […]

  2. […] The Battle Over Centering on the Longest Line in CSS […]

  3. […] The Battle Over Centering on the Longest Line in CSS […]

Post a Comment

Required fields are marked *

%d bloggers like this: