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: css, web page design, web design tips, web design help, centering on the longest line, centering, centering text, centering text with css, align text, css align, web page design css
Copyright Lorelle VanFossen, member of the 9Rules Network Subscribe