SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Threaded View

  1. #1
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to align text in center?

    Hi
    Please tell me how to make the text of a link come in the middle of the box.
    I have a horizontal navigation bar. but the texts like, home, contact us, etc. displayed as blocks, are at the top of their boxes. increasing the margin or the padding makes the whole box come down. i want to bring the text in the middle.
    I hope u understand what im talking about .
    Any help please? i have attached an image of the navigation bar.

    html code:
    HTML Code:
    <div class="nav">
        	<div class="navigation"></div>
            <div class="center1">
            	<ul>
                  <li><a href=""><span>About Us</span></a></li>
                  <li><a href=""><span>Portfolio</span></a></li>
                  <li><a href=""><span>Contact Us</span></a></li>
                  <li><a href=""><span>About Us</span></a></li>
                  <li><a href=""><span>About Us</span></a></li>
                  <li><a href=""><span>About Us long</span></a></li>
          	 	</ul>
            </div>        
            <div class="right1"></div>
        </div>
    css code:
    Code:
    .nav{
    	/*border:#00F 1px solid;*/
    	margin: -45px 0px 0px 0px;
    }
    
    .right1 {
    	height:45px;
    	background:url(../images/rr2.gif) right no-repeat;
    	width:10px;
    	float:right;
    }
    
    .navigation {
    	width:270px;
    	height:45px;
    	background:url(../images/header_tub.gif) left no-repeat;
    	float:left;
    	
    }
    
    
    
    .center1, .center1 ul {
    	height:45px;
    	width: 630px;
    	float:left;
    	background:url(../images/g_h2.gif) center repeat-x;
    }
    
    
    .center1 ul li {
    	display:block;
    	float:left;
    	height:36px;
    	margin-top:3px;
    }
    
    
    .center1 a:link, .center1 a:visited {
    	text-decoration:none;
    	color:#C9F9C1;
    	display:block;
    	height:36px;
    	padding:0px 0px;
    	border: 1px solid red;
    }
    
    .center1 ul li a span {
    	display:block;
    	height:36px;
    	padding:0 15px 0 0;
    	margin-left:15px;
    	border:1px solid orange;
    }
    
    
    .center1 li a:hover {
    	color:#060;
    	text-decoration:none;
    	background:url(../images/ahover-bg.png) left top no-repeat;
    	height:36px;
    }
    
    .center1 ul li a:hover span{
    	background:url(../images/spanhover-bg.png) right top no-repeat;
    	height:36px;
    }
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •