Member Avatar for n0m4d

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?

  • 3 Contributors
  • 4 Replies
  • 557 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by n0m4d
Member Avatar for ShawnCplus

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; }
Member Avatar for n0m4d

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?

Member Avatar for Airshow

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

Edited by Airshow because: n/a
Member Avatar for n0m4d

Nice, thanks Airshow. That worked great.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.