SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertcal align inside a link?

    Is it possible to vertical align text in a link which is set as display block?

    I cant use padding because i use images inside the link that can vary from height..


    Code:
    a.modelLink:link, a.modelLink:visited {
    	display:block;
    	width:90%;
    	border:1px solid #000000;
    	background-color:#133e5e;
    	vertical-align:top;
    	text-decoration:none;
    	color:#bcdcf2;
    	height:100px;
    }
    a.modelLink:hover {
    	display:block;
    	width:90%;
    	border:1px solid #000000;
    	background-color:#263947;
    	vertical-align:top;
    	text-decoration:none;
    	color:#bcdcf2;
    	height:100px;
    }
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  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)
    If you want the text centred, try setting the line-height to the same as height which should automatically center the text in that line.
    Code:
    line-height:100px;
    However IE won't vertically align the images with this method and you may need to set the image to vertical-align:middle.

    If you had a live example it would be easier to test out

  3. #3
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://mech7.net/tmp/faceup/xhtml/in...tid=2&models=1

    Here is a live example i tried the line height allready but it did not seem to work?
    Go visit my site :-D you know you want to ;-)
    www.mech7.net

  4. #4
    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,

    Thsi will align the text and image vertically in mozilla but only the text in ie (for some reason).
    Code:
    a.modelLink {
     width:338px;
     float:left;
     border:1px solid #000000;
     background-color:#133e5e;
     text-decoration:none;
     color:#bcdcf2;
     height:100px;
     background-image:url(images/bgModels.gif);
     line-height:100px
    }
    a.modelLink:hover {
     background:#263947 url(images/bgModels_hover.gif);
    }  
    .contentPad td img{vertical-align:middle}

  5. #5
    SitePoint Guru
    Join Date
    Jul 2004
    Location
    Netherlands
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    was afraid for that will see if i can find another solution
    Go visit my site :-D you know you want to ;-)
    www.mech7.net


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
  •