# Solved: vertical centering H5 tag with image



## aconite (Feb 1, 2006)

hi,

wondering if anyone can help me with the following: I have a h5 tag which includes an image(about), see attached, I want to center the about image vertically, have tried margin-top, padding-top, vertical-align and it doesn't seem to work, or is it just me. Thanks in advance for any suggestions

CSS:
h5 {font-family:'Brie Light'; color:#87655b; float:left; margin-left:100px; background:#f1f1f3; text-indent:-9999px; 
margin-top:80px;}
#container-about {background:#797a73; height:600px;}
#about {margin:0 auto; width:960px; padding-top:90px; margin-top:20px;}
#content-right {float:right; margin-top:15px; display:inline; width:530px; height:auto;}

html

```
<div id="container-about">		   
    	
		<div id="about">
        
           	<h5 id="me">about</h5>
           		 <img src="http://forums.techguy.org/images/pngAbout.png" width="306" height="252" 
                           alt="about png web design">
        
           
           <div id="content-right">
        
            <div id="thumbnail">
            <img src="http://forums.techguy.org/images/Untitled-1.png" width="84" height="110" alt="picture of paul"></div>
            
            <div id="indent-description">
            
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus veli nec facilisis ipsum
                      libero vitae lorem! Cras id purus lorem. Duis porttitor nibh eget tortor faucibus rhoncus<br>
                
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus velit, quis dapibus 
                      lacus. Nullam sodales, justo, nec facilisis ipsum libero vitae lorem! Cras id purus lorem. Duis 
                      porttitor nibh eget tortor faucibus rhoncus</p>   
              </div>
            
            <div id="description">
            
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus aliquam purus eget 
                      posuere. Suspendisse faucibus.<br>
                   
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi orci magna, cursus sit amet 
                      scelerisque ac, tempor a leo. Aliquam mollis, risus in consequat euismod, turpis erat euismod 
                      nulla; vitae. </p>  
                   
                       &nbsp; Lorem ipsum dolor sit amet:
                            
                    <ul id="services">
                        <li>Lorem ipsum</li>
                        <li>Lorem ipsum dolor si amet</li>
                        <li>Aliquam mollis risus in consequat</li>
                        <li>Nec facilisis</li>
                        <li>Praesent faucibus</li>
                     </ul>    
                   
                <p>You can <a href="">contact us </a> to discuss your next project</p>   
            </div>
```


----------



## colinsp (Sep 5, 2007)

Put your H5 code inside another div and position it there with padding as appropriate.


----------



## colinsp (Sep 5, 2007)

himler said:


> or use center tag with cod


Really 

The center tag is for HORIZONTAL centring not for VERTICAL centring as the OP asked


----------



## thingamajig (Mar 5, 2005)

It's counter-intuitive perhaps, but you align the image - not the text

http://www.w3schools.com/Css/pr_pos_vertical-align.asp

e.g.

img
{
vertical-align:text-top;
}


----------



## aconite (Feb 1, 2006)

colinsp,

your advice helped, thanks


----------

