Vertically aligning text next to an image

Hi,

I’m trying to align some text to the middle of an icon. I’m specifying the line height of the text to be the same as the containing <li> (as shown in this tutorial Vertical align for navigation lists with multiple lines - Web design tips & tricks). When I give the text 'vertical-align: middle ’ it renders below the baseline.

Here’s the html:

<div class="contwrapper">
				<div class="contact">
					<ul class="group">
						<li class="telephone">
							<img src="phone.png" width="50" height="32" alt="phone icon"/><span class="number">0774 9498 648</span>
						</li>
						<li class="email">
							<div class="envicon group"><a class="envelope" href="contact.html#sendemail">Send me an email</a></div>
						</li>
					</ul>
				</div>
			</div>

Here’s the CSS:

.contwrapper
	{
	background: none repeat scroll 0 0 transparent;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 53.125em;
    height: 5.625em;
	}
	
.contact
	{
	background: none repeat scroll 0 0 white;
    height: 4.375em;
    margin: auto;
    width: 53.125em;
	padding-top: 1em;
	padding-left: 7em;
    padding-bottom: 1.25em;
	}
	
.contact li.email, li.telephone
	{
	display: block;
	list-style: none;
	float: left;
 	font-size: 1em;
	color: #1F1760;
	height: 2em;
	margin: 0;
	text-align: center;
	line-height: 2em;
	padding-left: 2.5em;
	padding-right: 1em;
	border: 1px solid #ccc;
	}	

.contact li.telephone .number
	{
	vertical-align: middle;
	border: 1px solid #FF3300;
	}

Here’s the link to the web page:
http://www.jachayes.co.uk/test/

thanks in advance for any help.

wewyr

You have to give vertical-align to img not to span.

<img src=“phone.png” width=“50” height=“32” alt=“phone icon” style=“vertical-align: middle;”/>

Try vertical-align middle or bottom to fit prefectly.

I’m wondering… What’s with all the containers for nothing, oddball fractional EM widths, why you’re even trying to put those images in the markup as they don’t appear to actually be content (and background-position: left center; would be a lot easier), the attempt to use position:fixed (which most always ends up a broken mess), etc, etc…

I’d have to see it live on a actual page as we’re probably not seeing the whole picture, but I suspect you’ve got twice as much markup AND twice as much CSS as necessary.

I’m not even sure this warrants a list…

@tamilsuresh: thanks very much that did the trick.

@deathshadow60: There is a link to the site in my post. The em values for padding etc. mean that the layout will scale depending on the users font size preference. As far as I know using fractional em values is a valid way of specifying an exact distance that is relative to the font size. I know there is a lot of extraneous html and css. Before I begin my next project I’m going to finish reading “CSS Development- From Novice to Proffesional”. The last time I designed a website was about 8 years ago so I’m very rusty.

ta,
wewyr

The bit about the use of EM – mostly I’ve NEVER seen anyone resort to three decimal places on one before. Just seems silly on a fixed width layout.

Looking at the actual page (or I assume the actual page since /test is empty, but the code in question is present on the parent) what makes it a list, and why does it need TWO div? Also, those images are not content, they’re presentation so I would be applying them with background and not IMG.


	<div id="fixedFooter">
		<span class="phone">0774 9498 648</span>
		<a href="contact.html#sendemail" class="mail">Send me an email</a>
	<!-- #fixedFooter --></div>


#fixedFooter {
	position:fixed;
	bottom:0;
	font:normal 1em/1.5em arial,helvetica,sans-serif;
	text-align:center;
}

#fixedFooter span,
#fixedFooter a {
	display:inline-block;
	margin:0 1em;
	padding:2.5em 0 2.5em 64px;
}

#fixedFooter .phone {
	background:url(images/phone.png) center left no-repeat;
}

#fixedFooter .mail {
	background:url(images/mail.png) center left no-repeat;
}

Should be ‘close enough’ – no need to specify the height, let line-height take care of that… NOT that I’d be using position:fixed given the train wreck that usually is cross-browser.

Oh, and naturally you might want to play with the padding for the image.

The top of the page has similar issues, given the lack of images off graceful degradation and again, a whole bunch of wrapping div for NOTHING.

Where you have:


<div class="container">
	<div class="intro">
		<div class="pageHeader">
			<h1><span>Jacqueline Hayes</span></h1>
		</div>
		<div class="nav">
			<ul class="nav">

I would probably have:


<div id="pageWrapper">

	<h1>
		Jacqueline Hayes Therapy<br />
		<small>DIP Counselling &amp; Psychotherapy, PhD Psychology, MBACP</small>
		<span><!-- image replacement --></span>
	</h1>
	
	<ul id="mainMenu">

Text so when the images aren’t present there’s actually CONTENT, using the dummy span to position the image OVER the text to hide it instead of the broken ‘slide it out of the way’ thing… NONE of those extra DIV are necessary as you aren’t doing anything that couldn’t be put on the H1 or the UL. Same goes for all those .off classes – you should only use classes for the ones that are different (.on) instead of for every element. Waste of code – Carlin once joked “Not every ejaculation deserves a name” – For web development that becomes “Not every element needs a class, ID or wrapping DIV”. Basically, div.intro, div.pageHeader, div.nav, div.off, div.contact, ul.group, and all those span inside the content area paragraphs are pointless and unnecessary.

If I were writing the same page, the HTML would probably look something 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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Jacqueline Hayes Therapy - Counsellor in South Manchester
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Jacqueline Hayes Therapy<br />
		<small>DIP Counselling &ampl Psychotherapy, PhD Psychology, MBACP</small>
		<span><!-- image replacement --></span>
	</h1>
	
	<ul id="mainMenu">
		<li class="on">
			<a href="index.html">Home</a>
			<ul>
				<li class="on">
					<a href="index.html">Introduction</a>
				</li><li>
					<a href="contact.html">Contact</a>
				</li><li>
					<a href="links.html">Links</a>
				</li>
			</ul>
		</li><li>
			<a href="thewayiwork.html">About</a>
			<ul>
				<li>
					<a href="thewayiwork.html">The Way I Work</a>
				</li><li>
					<a href="couplescounselling.html">Couples Counselling</a>
				</li><li>
					<a href="telephonecounselling.html">Telephone Counselling</a>
				</li><li>
					<a href="faq.html"><acronym title="Frequently Asked Questions">FAQs</acronym></a>
				</li>
			</ul>
		</li><li>
			<a href="fees.html">Details</a>
			<ul>
				<li>
					<a href="fees.html">Fees</a>
				</li><li>
					<a href="qualifications.html">Qualifications</a>
				</li><li>
					<a href="pcc.html">Person Centred Counselling</a>
				</li>
			</ul>
		</li><li>
			<a href="psychology.html">Psychology</a>
		</li><li>
			<a href="/blog">Blog</a>
		</li>
	</ul>
	
	<div id="content">
		<img
			src="portrait.jpg"
			width="242" height="282"
			alt="Jacqueline Hayes portrait"
			class="trailingPlate"
		/>
		<p>
			I am a counsellor and psychotherapist based in South Manchester, within easy reach of Chorlton, Whalley Range, Moss Side, Old Trafford and close to tram and bus stops. I offer therapy to individuals and couples, in person, and on the telephone. I have helped clients from many different backgrounds and with many different kinds of problems and issues. For example, I have helped clients with; bereavement, depression, anxiety and panic, addictions, suicidal feelings, work-related stress. I also specialise in helping people who hear voices, and have written a PhD in this area. However, I find the reasons that people seek therapy are so individual and so I keep an open mind about what someone may want from their therapy.
		</p><p>
			I offer a professional and confidential service and I am committed to ethical practice. I am a member of a professional body (<acronym title= "British Association of Counselling Practitioners"><a href="http://www.bacp.co.uk/">BACP</a></acronym>), I'm fully insured, and receive regular supervision.
		</p><p>
			As your therapist you can expect me to be warm, approachable and perceptive. I will offer you a calm, reflective atmosphere in which to find clarity, make changes in your life, heal, and grow. I am present in a genuine, compassionate, and non-judgmental way, and I may challenge you at times. I am committed to being responsive to the needs of individual clients, and I tailor my work to your&#8217; needs, also recognising that these needs may change over time. For example, you may want to learn how to cope with a specific problem, or you may want to change who you are in a profound and lasting way. You may simply want to be met as you are now, with acceptance, and no pressure. I can offer professional help with these goals.
		</p><p>
			At the heart of my work is a deep belief that everyone, no matter their abilities, no matter their issues, is entitled to a therapeutic relationship in which they are respected and valued. I believe that anyone can change, and healing is always possible, when someone is trying and is helped by others.
		</p><p>
			I hope that this website will give you an insight into how I work as a therapist so that you can make a judgement on whether I would suit you. But I also am very happy to talk informally on the phone about the counselling I offer so that you can get more of a sense of me.
		</p>
	<!-- #content --></div>
	
	<div id="footer">
		<ul>
			<li>
				<a href="index.html">Home</a>
			</li><li>
				<a href="contact.html">Contact Details</a>
			</li>
		</ul>
		Copyright &copy; http://www.jachayes.co.uk<br />
		<span class="phone">0774 9498 648</span>
		<a href="contact.html#sendemail" class="mail">Send me an email</a>
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>	
	
</body></html>

Just saying…

Hi deathshadow,

thanks for the detailed critique. I’ve skimmed over it and will look over it more closely when I get back from work next week.

ta,

wewyr.