Horizontal Aligning Image and Text in Navigation Div

HTML & CSS
1

Hey all,

I’m putting a little site together and ran into a little issue with the alignment of an image and the navigation links. The image if (roughly) centred horizontally in the #nav div and then the links follow. The problem is that I can’t get the image and links to align horizontally.

Hope you can help.

This is the page: www.allaboutaddiction.org

This is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>All About Addiction</title>
<link href="scripts/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body id="hp">
<div id="wrapper">
  <div id="topheader"><img src="images/aaa-logo.png" width="290" height="98" /></div>
  <div id="nav"><img src="images/aaa-logotxt.png" /><img src="images/spacer.png" width="40" height="1" /><a href="#">Home Page</a><img src="images/spacer.png" width="25" height="8" /><a href="#">The Programme</a><img src="images/spacer.png" width="25" height="8" /><a href="#">Referrals</a><img src="images/spacer.png" width="25" height="8" /><a href="#">Additiction</a><img src="images/spacer.png" width="25" height="8" /><a href="#">Therapy</a></div>
  <div id="content">
    <p class="titles"><strong>Welcome to All About Addiction</strong></p>
      <div id="innercontent">
      <p class="titles">What We Offer</p>
      <p>We offer a comprehensive day programme to all clients wanting to address their addiction.</p>
      <p>We offer a drug/alcohol free environment where clients are encouraged to develop self awareness and personal responsibility for their addiction.</p>
      <p>We offer support and encouragement to help address the psychological, emotional, sociological and spiritual elements of the 'Human Being' Addiction negatively impacts on all these elements.</p>
      <p>Addiction affects every aspect of a persons life, and the lives of the people around them. Successful recovery therefore involves more than stopping drinking/using. The Alcoholic/Addict must stay stopped regardless of life's challenges.</p>
      <p class="titles">Mission Statement</p>
      <p>We believe everybody deserves a chance at life. Given the right support, encouragement, understanding and hard work effective change is possible.</p>
      <p>All About Addition is a not for Profit Social Enterprise.</p>
      <p class="qtxt">&ldquo;If someone listens, or stretches out a hand or whispers a word of encouragement, or attempts to understand a lonely Person, extraordinary things begin to happen&rdquo; LORETTA GIRZATIS 1920</p></div>
  </div>
  <div id="footer">
    <p><strong>UNDER CONSTRUCTION</strong></p>
  </div>
</div>  
</body>
</html>

Here is the CSS

* {
    margin: 0;
    padding: 0;
}
p {
    margin-bottom: 1em;
    color:#000000;
}
body {
    background-color: #005826;
    font-family: Arial, Sans-serif;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-right: 0px;
    font-size: 12px;
}
a {
    text-decoration: none;
    color: #005826;
    font-weight: bold;
}
a:hover {
    text-decoration:underline;
}

.footerlink {
    color: #000000;
}
.imgclr {
    clear: both;
    float: left;
}
.titles {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #005826;
}
.qtxt {font-family: Georgia, "Times New Roman", Times, serif}
#wrapper {
    border: 1px solid black;
    background-color: #ffffff;
    width: 800px;
    margin: 0 auto;
}

#topheader {
    background-color: #FFFFFF;
    height: 99px;
    padding: 5px 10px 0;
}
#topheader img {float: left;}
#nav {
    background-color:#8dc73f;
    padding: 0px 6px 0;
}
#nav img {padding-top: 3px;}
#nav a {
    padding-top: 0px;
    padding-bottom: 0px;
}
#content {
    padding-top: 5px;
    padding-left: 8px;
    padding-right: 80px;
}
#innercontent {
    padding-left: 60px;
}
#footer {
    clear: both;
    text-align: center;
    padding-top: 25px;
}

Thanks

2

Hi,
Give a vertical-align to the img and the set the same padding on top and bottom.

#nav img {
[COLOR=Blue]padding:[/COLOR] [COLOR=Blue]3px[/COLOR] 0 [COLOR=Blue]3px[/COLOR] 0;
[COLOR=Blue]vertical-align:middle;[/COLOR]
}
#nav a {
padding:0;
}
3

Hey Rayzur thanks for the advise, works a treat :slight_smile: