Text baseline shift

HTML & CSS
1

just wondering is it possible in CSS to adjust the baseline of text…i’ve been searching online to try to see but can’t find anything.

2

Hi,

Do you mean vertically aligning text within a single line.

Heres an example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Inline layout model</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.test {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.test span {
font-size:12px;
vertical-align:bottom
}
.test em {
font-size:8px;
vertical-align:top
}
.test strong {
font-size:10px;
vertical-align:baseline;
color:green;
}
-->
</style>
</head>
<body>
<div class="test">
<p>Hello this is some text <span>This is some more text on the bottom</span><strong> and this is some text on the baseline</strong><em> and some more text at top</em></p>
</div>
</body>
</html>

Vertical align is a bit tricky at the best of times and only refers to inline elements in a single line (or table cell).

Browsers do vary also.

Paul

3

well not exactly…i’ve got this image as part of the text line and in the image there’s a “y” and the end so the image box goes below the end of the “y”. so therefore when in the image i say style=“vertical-align:bottom” the text next to the image appears lower, because it’s aligning with the bottom of the image.

i tried using line-height which works as far as the first line appears, but it’s too much space between lines i think. i’m not quite sure how to solve the problem.

i updated my site: here

thanks so much, Paul, for all your help. i’ve got lots to learn in CSS.

carolyn

4

Hi Carolyn,

I’d just shift that little bit of text downwards with some styles applied directly to it. You don’t want a large line height all the way through that block I wouldn’t have thought.


td.maintext {vertical-align: top; padding-top: 0px; margin-top: 0px; padding-left: 10px; padding-right: 10px;}
td.maintext p {margin:0 0 1em 0;padding:0}
td.maintext p img{vertical-align:middle}
td.maintext p span{position:relative;top:5px;}




	  <td width="595" class="maintext"><p><img src="[http://www.capeedesign.com/TolCon/images/intro-text.jpg](http://www.capeedesign.com/TolCon/images/intro-text.jpg)" width="285" height="38" alt="The Northwest Tolkien Society" /> 
		  <span>is pleased to present TolCon 2005, the second</span> Annual Tolkien Convention, 
		  a celebration of all things Tolkien!</p></td>

Hope that helps.

Paul