I'm making a DIV that has two lines of text which are centered and vertically aligned with line-height to make them appear in the middle.
The problem is that I want the first line of text to have a font of 3.5em, and the second line 1.8em.
I've tried to put the second line in a paragraph with a class, but the font and line height become very large.
What is the proper way to achieve that?
Jump to PostNomad,
I would do it with <h1> and <h2> tags, thus making the two lines independent of each other. I think you will find that the :first-line approach will superimpose its 3.5em on the 1.8em already applied, effectively giving (1.8 * 3.5)em or 6.3em.
<!DOCTYPE html …
You could use a <span> tag or (this may not be cross-browser compatible) you can use the first-line pseudo-selector on the div like so
div#someID { font-size: 1.8em; }
div#someID:first-line { font-size: 3.5em; }thanks for the suggestion ShawnCplus but that didn't work. It actually made both fonts very large.
I did put the body font as 62.5% to make this as a common basic font in all browsers. Could that be an issue?
Nomad,
I would do it with <h1> and <h2> tags, thus making the two lines independent of each other. I think you will find that the :first-line approach will superimpose its 3.5em on the 1.8em already applied, effectively giving (1.8 * 3.5)em or 6.3em.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
body { font-family: ariel; }
#someID {
/* General style for the div here */
}
#someID h1, #someID h2 {
margin: 0;
font-weight: normal;
}
#someID h1 { font-size: 3.5em; }
#someID h2 { font-size: 1.8em; }
</style>
</head>
<body>
<div id="someID">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>
</body>
</html>Note that the CSS directives include margin:0 to suppress <h1>'s and <h2>'s natural vertical spacing behaviour. <p> does the same.
You will need to apply some directive to achieve vertical alignment but from what you say, you already know how to do that. (Several approaches are available).
Airshow
Nice, thanks Airshow. That worked great.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.