Align text to link bottom

HTML & CSS
1

Align text to link bottom

Hi all

I’m sure this is simple but I can’t work it out.

http://www.ttmt.org.uk/css/

I have <a>'s in a list, they have text and an image as a background.

I want to line the text to the bottom of the image but some of the text is on one line
and some on two.

Can I place the text on the bottom of the <a> and then apply padding so they are all level on the bottom.
So it will look like the attached image.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 ul{
	   margin:50px;
	   list-style:none;
	 }
	 ul li{
	   margin:0 0 2px 0;
	
	 }
	 ul li a{
	   background:#aaa url('pic.png') no-repeat 8px 12px;
	   color:black;
	   display:block;
	   font:1em Helvetica, sans-serif;
	   height:48px;
	   padding:27px 0 0 70px;
	   text-decoration:none;
	   vertical-align:bottom;
	   width:120px;
	 }
	</style>
</head>

<body>

  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two - Second Line of Text</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>

</body>
</html>
2

HI,

You can do it like this for all browsers but you need an extra element.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
* {
	margin:0;
	padding:0;
}
ul {
	margin:50px;
	padding:0;
	list-style:none;
}
ul li {
	margin:0 0 2px 0;
	height:78px;
	background:#aaa;
	width:190px;
}
ul li a {
	background:#aaa url('pic.png') no-repeat 8px 12px;
	color:black;
	display:inline-block;
	font:1em/1.2 Helvetica, sans-serif;
	padding:0 0 0 70px;
	text-decoration:none;
	vertical-align:bottom;
}
ul li b{
	display:inline-block;
	vertical-align:bottom;
	height:100%;
	margin-right:-5px;
	width:1px;
	overflow:hidden;
}
</style>
</head>

<body>
<ul>
		<li><a href="#">One</a><b></b></li>
		<li><a href="#">Two - Second Line of Text</a><b></b></li>
		<li><a href="#">Three</a><b></b></li>
		<li><a href="#">Four</a><b></b></li>
</ul>
</body>
</html>

For ie8+ you could just use the display table and table-cell properties with vertical-align:bottom.

3

Paul O’B Thanks for your reply - your code gives me this.

http://www.ttmt.org.uk/css1/

I’ve been trying to do it myself and came up with this.

http://www.ttmt.org.uk/css2

It’s probably completely wrong but this is how I wanted it to look.

Also I wanted to change the image on hover. With my idea I would have to use jQuery, surely this can’t be that hard.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 ul{
	   margin:50px;
	   list-style:none;
	 }
	 ul li{
	   margin:0 0 2px 0;
	 }
	 ul li a{
	   position:relative;
	   padding:5px;
	   background:#aaa;
	   color:black;
	   display:block;
	   font:1em Helvetica, sans-serif;
	   text-decoration:none;
	   width:170px;
	 }
	 ul li a img{
	   margin:5px 0 0 5px;
	 }
	 ul li a span{
	   display:block;
	   position:absolute;
	   left:70px;
	   bottom:10px;
 	   width:100px;
 	 }
	</style>
</head>

<body>

  <ul>
    <li><a href="#"><img src="pic.png" /><span>One</span></a></li>
    <li><a href="#"><img src="pic.png" /><span>Two - Second Line of Text</span></a></li>
    <li><a href="#"><img src="pic.png" /><span>Three</span></a></li>
    <li><a href="#"><img src="pic.png" /><span>Four</span></a></li>
  </ul>

</body>
</html>
4

Ok so I’ve got it working with <span>, <em> tags and position:absolute.

http://www.ttmt.org.uk/css3/

Will this code cause me any problems? Does it look like a hack?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 ul{
	   margin:50px;
	   list-style:none;
	 }
	 ul li{
	   margin:0 0 2px 0;
	 }
	 ul li a{
	   position:relative;
	   padding:5px;
	   background:#aaa;
	   color:black;
	   display:block;
	   font:1em Helvetica, sans-serif;
	   text-decoration:none;
	   width:170px;
	 }
	 ul li a span{
	   background:url('pic.png') no-repeat top left;
	   display:block;
	   margin:5px 0 5px 5px;
	   width:50px;
	   height:50px;
	 }
	 ul li a:hover span{
 	   background:url('test.gif') no-repeat top left;
 	 }
	 ul li a em{
	   display:block;
	   position:absolute;
	   left:70px;
	   bottom:7px;
 	   width:100px;
 	   font-style:normal;
 	 }
	</style>
</head>

<body>

  <ul>
    <li><a href="#"><span></span><em>One</em></a></li>
    <li><a href="#"><span></span><em>Two - Second Line of Text</em></a></li>
    <li><a href="#"><span></span><em>Three</em></a></li>
    <li><a href="#"><span></span><em>Four</em></a></li>
  </ul>

</body>
</html>
5

That’s ok but would suffer if the user resizes the text or if you have more lines of text and then it will overflow.

I would reverse it and absolutely place the image so that text resize isn’t an issue and then use the method I gave to align the text but use a minimum height.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
* {
	margin:0;
	padding:0;
}
ul {
	margin:50px;
	padding:0;
	list-style:none;
}
ul li {
	margin:0 0 2px 0;
	padding:10px 0;
	min-height:50px;
	background:#aaa;
	width:190px;
	position:relative;
}
* html ul li { height:50px }
ul li a {
	color:black;
	display:inline-block;
	font:1em/1.2 Helvetica, sans-serif;
	padding:0 0 0 70px;
	text-decoration:none;
	vertical-align:bottom;
}
ul li b {
	display:inline-block;
	vertical-align:bottom;
	height:50px;
	margin-right:-5px;
	width:1px;
	overflow:hidden;
}
ul li span {
	position:absolute;
	left:10px;
	top:10px;
	width:50px;
	height:50px;
	background:green;
}
</style>
</head>

<body>
<ul>
		<li><a href="#"><span></span>One</a><b></b></li>
		<li><a href="#"><span></span>Two - Second Line of Text </a><b></b></li>
		<li><a href="#"><span></span>Three</a><b></b></li>
		<li><a href="#"><span></span>Four</a><b></b></li>
</ul>
</body>
</html>
6

remember that along with Paul’s methods, you can always use the :after pseudo element , if you don’t want to muck up your HTML.


ul li:after, ul li span.after{ 
       content:""; 
	display:inline-block;
	vertical-align:bottom;
	height:100%;
	margin-right:-5px;
	width:1px;
	overflow:hidden;

}
ul li {	zoom:expression(
  		runtimeStyle.zoom=1,
  		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
  	);}
7

Thanks Paul O’B

I need to have the image as a background so I can change it with hover

I can change your code to include the image and change it with hover but with your code only the text is in the <a> and not the whole button.

http://www.ttmt.org.uk/css4/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
* {
	margin:0;
	padding:0;
}
ul {
	margin:50px;
	padding:0;
	list-style:none;
}
ul li {
	margin:0 0 2px 0;
	padding:10px 0;
	min-height:50px;
	background:#aaa;
	width:190px;
	position:relative;
}
* html ul li { height:50px }
ul li a {
  border: 1px solid red;
	color:black;
	display:inline-block;
	font:1em/1.2 Helvetica, sans-serif;
	padding:0 0 0 70px;
	text-decoration:none;
	vertical-align:bottom;
}
ul li b {
	display:inline-block;
	vertical-align:bottom;
	height:50px;
	margin-right:-5px;
	width:1px;
	overflow:hidden;
}
ul li span {
  background:url('pic.png') no-repeat top left;
	position:absolute;
	left:10px;
	top:10px;
	width:50px;
	height:50px;
}
ul li a:hover span {
  background:url('test.gif') no-repeat top left;
}
</style>
</head>

<body>
<ul>
		<li><a href="#"><span></span>One</a><b></b></li>
		<li><a href="#"><span></span>Two - Second Line of Text </a><b></b></li>
		<li><a href="#"><span></span>Three</a><b></b></li>
		<li><a href="#"><span></span>Four</a><b></b></li>
</ul>
</body>
</html>
8

I suppose I should have asked at the start but it looks like you want the whole gray block to be active and if so you can do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
* {
	margin:0;
	padding:0;
}
ul {
	margin:50px;
	padding:0;
	list-style:none;
}
ul li {
	margin:0 0 2px 0;
	min-height:50px;
	background:#aaa;
	width:190px;
	position:relative;
}
* html ul li,* html ul li a { height:50px }
ul li a {
	border: 1px solid red;
	color:black;
	display:block;
	font:1em/1.2 Helvetica, sans-serif;
	padding:10px 0 10px 70px;
	text-decoration:none;
	min-height:50px;
}
ul li span {
	display:inline-block;
	vertical-align:bottom;
}
ul li b {
	display:inline-block;
	vertical-align:bottom;
	height:50px;
	margin-right:-5px;
	width:1px;
	overflow:hidden;
}
ul li em {
	background:url('http://www.ttmt.org.uk/css4/pic.png') no-repeat top left;
	position:absolute;
	left:10px;
	top:10px;
	width:50px;
	height:50px;
}
ul li a:hover{visibility:visible}/* ie6 fix */
ul li a:hover em { background:url('http://www.ttmt.org.uk/css4/test.gif') no-repeat top left; }
</style>
</head>

<body>
<ul>
		<li><a href="#"><span><em></em>One</span><b></b></a></li>
		<li><a href="#"><span><em></em>Two - Second Line of Text </span><b></b></a></li>
		<li><a href="#"><span><em></em>Three</span><b></b></a></li>
		<li><a href="#"><span><em></em>Four</span><b></b></a></li>
</ul>
</body>
</html>

(You can use more semantic elements or spans with classes if you want).

Works all the way back to ie6.