Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    vertical align a link next to an image issues

    Hi,

    I have read many posts on here about vertically aligning text but none seem to adress my issue or at least I dont think they do. I want to vertically align two links to the middle sitting next to an image each. The images and links are sitting within a div and the links currently sit at the top of the div. I can position the link easily enough horizontally by placing padding on #iconPan a but it stubbornly wont respond vertically when I add any top padding.

    Here is my html:

    Code:
    <div id="iconPan">
        <div class="icon"><img src="images/exclamation.gif" alt="FAQs" width="35" height="35" class="image" /><a href="">FAQs</a></div>
        <div class="icon"><img src="images/home.gif" alt="Home" width="35" height="35" class="image" /><a href="index.html">Home</a></div>
        </div>
    Here is my css:

    Code:
    #iconPan {width:900px; float:left; border:none; margin-top: 5px; padding: 0;}
    
    .icon {width:100px; float:left; border:none; margin: 0; padding: 0;}
    
    #iconPan .image{float:left; margin-right: 0px; padding: 0px;}
    
    #iconPan a{color:#0023A0; text-decoration:none; font-size:1.25em; font-weight:normal; padding: 10px 10px 10px 5px;} 
    
    #iconPan a:hover{color:#ffaa00; text-decoration:underline;}
    You can see the 2 images and links sitting at the bottom of the screen in this URL: http://www.michael-williams.com.au/index2.html

    Any hints or tips as to what I can do would be much appreciated. Thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try adding line-height:35px; to #iconPan
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah thank you abduraooft! A perfectly simple solution!


  •  

    Posting Permissions

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