SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    middle alignment

    Hello all,

    I am trying to middle align this <ul> <li> elements. I would like to have the end product have arrows in the images pointing to the center of the text. I just can 't seem to get this done right now no matter what I try. Any help would be appreciated.

    Thanks!
    http://www.servicewhale.com/pagination.htm

    HTML Code:
    <!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=iso-8859-1" />
    		<title>Untitled Document</title>
    		<style>
    			ul li {
    			    display: inline;
    			    color: #C00;
    			    vertical-align: middle;
    					padding: 0 0 10px 0;
    					margin: 0 0 10px 0;
    			}
    			ul li a {
    			    color: #C00;
    			    font-size: 14px;
    					text-decoration: none;
    			}
    			ul li a img {
    			    padding: 10px 0 0 0;
    					border: none;
    			}		
    		</style>		
    	</head>
    	<body>
    		<ul>
    			<li><span>Page</span></li>
    			<li><b>1</b></li>
    			<li><a href="#">2</a></li>
    			<li><a href="#">3</a></li>
    			<li>...</li>
    			<li><a href="#">29</a></li>
    			<li><img class="arrows" src="http://www.servicewhale.com/images/left_arrow.gif" alt="Left Arrow - Move to lower pages"></li>
    			<li><a href="$"><img class="arrows" src="http://www.servicewhale.com/images/right_arrow.gif" alt="Right Arrow - Move to higher pages"></a></li>
    		</ul>
    	</body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Vertical-align can be awkward so I would so something like this for pretty consistent results:

    Code:
                ul li {
                    display: inline;
                    color: #C00;
                        padding: 0 0 10px 0;
                        margin: 0 0 10px 0;    
                        font-size: 14px;
                }
                ul li a {
                    color: #C00;
                        text-decoration: none;
                }
                ul li a img {
                    padding: 10px 0 0 0;
                        border: none;
                }    
                ul li img{
                    vertical-align:text-bottom;
                    position:relative;
                    top:2px    
                }

  3. #3
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect! thanks Paul

  4. #4
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Also I suggest that you put your CSS in a .css file!


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
  •