Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Align The Text To The Bottom Of The A Tag

Post a Comment
How do I get the text to the bottom of the a tag which is inside the li. Here is my code

Solution 1:

You can use relative+absolute positioning.

#navigation ul li{
    position: relative;
    display:inline-block;
    color:#fff;
    font:12px Verdana, Geneva, sans-serif;
    padding:0 25px;
    background:url(images/nav_img.jpg) no-repeat center top;
    width: 100px;
    height:50px;
}
#navigation ul li a{
    position: absolute;
    top: 30px;
    display:inline-block;
    color:#fff;
    font:12px Verdana, Geneva, sans-serif;
    text-decoration:none;
    height:50px;

}​

You can see demo here.


Solution 2:

Check this demo fiddle.Hope it helps.


Solution 3:

Maybe...

  • Don't set your 'a' elements 'height' explicitly
  • Set 'display' to 'block'
  • Add padding-top to your 'a' elements to push them down to where you need them

You may like these posts

Post a Comment for "Align The Text To The Bottom Of The A Tag"