Vertically Aligning Text with icons

HTML & CSS
1

Hi all, just a bit stuck on an alignment issue.

Im trying to align two side by side, separate icons with some preceding text, which will be a link. Both the icons, and the text are in their own classed div, but for the life of me I cant get the text to sit vertically in the middle of the icons height. So, Icon, Icon, text. A small detail, but its eluding me. (My CSS is external). Problem area is under ‘read More’ at the top. Thanks all :slight_smile: Ive tried adjusting line height but all that seems to do is move the icons as well.

HTML:

<h2><a href=“http://news.drive.com.au/drive/motor-news/holden-cuts-500-jobs-20130408-2hgkg.html” title=“Holden cuts 500 jobs” target=“new”>Read more</a></h2>
<div class=“comments”>
<img src=“images/camera_top.gif” width=“24” height=“24”>
<img src=“images/9_comments.gif” width=“24” height=“24” alt=“Comments”>
<h5><a href=“http://www.smh.com.au/business/holden-axes-jobs-as-dollar-stings-20130408-2hgpy.html#comments” target=“new”>Comments</a></h5>
</div>

CSS:
.comments{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #F90;
text-align: left;
float:left;
display:inline;
}

.comments a {
color: #F90;
text-decoration:none;
vertical-align:text-top;
}

2

Hi,

If you set the images and the anchor to display:inline and not floated nor display:block then you can align them with vertical-align:middle.

Note that “read more” should not be an h2 as it is not a heading at all but a link. If you wanted emphasis then you could have used strong around the text instead. Also you should not follow an h2 with an h5 tag as heading tags must flow logically and the next step would have been an h3 not an h5 anyway.

However the h5 is again incorrect in this instance as all you have is a simple link and should not be in a heading tag anyway.

It should look something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.readmore {
	font-weight:bold;
	margin:0 0 10px;
}
.comments {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #F90;
	margin:0 0 10px;
}
.comments a, .comments a:visited {
	color: #F90;
	text-decoration:none;
}
.comments img, .comments a {
	vertical-align:middle;
	display:inline;
}
</style>
</head>

<body>
<p class="readmore"><a href="http://news.drive.com.au/drive/motor-news/holden-cuts-500-jobs-20130408-2hgkg.html" title="Holden cuts 500 jobs" >Read more</a></p>
<p class="comments"> <img src="images/camera_top.gif" width="24" height="24"> <img src="images/9_comments.gif" width="24" height="24" alt="Comments"> <a href="http://www.smh.com.au/business/holden-axes-jobs-as-dollar-stings-20130408-2hgpy.html#comments">Comments</a> </p>
</body>
</html>