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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Vertical Align - Pictures?

    Hi!

    So far I've just used "line-height:xxpx;" to vertical align my text. But now I need to do it with some images. How come that it dosn't work with that? Also, what is the best way to valign images and text? I've done a search and feld over this:

    Code:
    margin-top:50%;
    position:relative;
    margin-bottom:-50%
    Would that be the soution for the images, or is there a better way?

  • #2
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Try the 'vertical-align' CSS property. While that sounds pretty simple, I've often had difficulty with vertically aligning content.

    http://www.htmldog.com/reference/css...ertical-align/

    Code:
    vertical-align: middle;
    Good luck!
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Hi, thanks for the answear.

    I have already tried the vertical-align:middle; tag, but I can't get it working. Makes no difference for me.

  • #4
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    I was afraid that might have been the case. Like I said before, vertical alignment is more difficult than it should be. There are a couple of approaches to take. If you're image is going to be a set height, you can always position it halfway down, then move it up with a negative margin. For example:

    HTML:
    Code:
    <img src="image-here.jpg" alt="Image Description" height="200" width="100" id="image-in-middle" />
    CSS:
    Code:
    img#image-in-middle {
    position: relative;
    top: 50%;
    margin-top: -100px; // Half of Image Height - 200px
    }
    If you don't know the image height (it varies), there is also this technique for vertical centering in CSS.
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Hi!

    I know the height of the images. I tried to use your example, but it dosn't work for me. DO I have to set the height and width in the image tag for it to work? Can't I get it work without?

    EDIT:

    This is btw my HTML + CSS. Maybe you can spot an error?

    Code:
    <div id="centerdiv-webcam">
    
    <div class="webcam-container">
    <div class="webcam-thumb"><img src="images\webcam_thumbs\ekrn.gif" alt="Test Movie" border="0" /></div><div class="webcam-text">
      <h4>Bornholm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EKRK</h4>
      </div>
    <div class="webcam-button"><a href=""><img class="image-in-middle" src="images/knapper/stream.gif" alt="Stream Now!" border="0" /></a></div><div class="webcam-flag"><img src="images/flags/denmark.gif" /></div>
    </div>
    CSS:

    Code:
    #centerdiv-webcam {	width:636px; 
    					margin-right:auto;
    					margin-left:auto;
    					}
    					
    .webcam-container {	width:636px;
    					height:51px;
    					margin-bottom:10px;
    					}
    
    .webcam-thumb {		width:74px;
    					height:51px;
    					float:left;
    					text-align:left;
    					}
    					
    					
    .webcam-text {		background-color:#333333;
    					width:316px;
    					height:51px;
    					padding-left:5px;
    					padding-right:5px;
    					float:left;
    					text-align:center;
    					font-family:Arial;
    					font-weight:normal;
    					font-size:12px;
    					color:#ffffff;
    					line-height:45px;
    					}
    					
    .webcam-button {	background-color:#333333;
    					width:170px;
    					height:51px;
    					padding-left:5px;
    					padding-right:5px;
    					float:left;
    					text-align:center;
    					font-family:Arial;
    					font-weight:normal;
    					font-size:12px;
    					color:#ffffff;
    					line-height:45px;
    					
    					}
    					
    .webcam-flag {		background-color:#333333;
    					width:56px;
    					height:51px;
    					float:left;
    					text-align:center;
    					}
    					
    .image-in-middle {
    position: relative;
    top: 50%;
    margin-top: -10x; // Half of Image Height - 200px
    }
    Last edited by CaptainB; 07-27-2007 at 10:10 PM.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    posted 09-03-06 11:17 AM
    The answer is that there is no answer. The W3C spells it out quite clearly here.
    quote:
    --------------------------------------------------------------------------------
    CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3.
    --------------------------------------------------------------------------------



    Culled from the internet.

    EDIT: Also from the internet:

    <html>
    <head>
    <style type="text/css">
    img.top {vertical-align:text-top}
    img.bottom {vertical-align:text-bottom}
    </style>
    </head>

    <body>
    <p>
    This is an
    <img class="top" border="0"
    src="logocss.gif" width="95" height="84" />
    image inside a paragraph.
    </p>

    <p>
    This is an
    <img class="bottom" border="0"
    src="logocss.gif" width="95" height="84" />
    image inside a paragraph.
    </p>
    </body>

    </html>

    http://www.w3schools.com/css/tryit.a...vertical-align

    Frank
    Last edited by effpeetee; 07-27-2007 at 11:11 PM. Reason: Extra info
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I guess I'll just have to use padding. Thanks guys, for the answears.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by CaptainB View Post
    I guess I'll just have to use padding. Thanks guys, for the answears.
    CaptainB

    The code in my previous post produces this:-

    http://www.exitfegs.co.uk/atry.html

    Do have a look.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Frank,

    Ah, okay. But the fact that I only have an image in the div, and it's that image that I want to valign in that div, makes me wonder if that is the solution? Cause I won't have any text in the div.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Make the containing div position:relative; and make the image position:absolute. If you know the width and height of the image then you are good.
    Code:
    div.webcam-button {
    position:relative;
    height:#px;
    width:#px;
    }
    div.webcam-button img.image-in-middle {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px; /* half the image height, must be negative */
    margin-left:-100px; /* half the image width, must be negative */
    }
    Though padding may be the better solution if all of the images have the same height and width. You also have this in the CSS you posted
    Code:
    .image-in-middle {
    position: relative;
    top: 50%;
    margin-top: -10x; // Half of Image Height - 200px
    }
    Where the heck did you get that value for the margin? I mean come on learning to copy and paste properly would help.
    Last edited by _Aerospace_Eng_; 07-28-2007 at 05:08 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thanks for your reply Aero, I'll have a look into it!

    Btw: I got that value from the half height of my pictures. They are 20 px.

    Cheers!

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    -10x is not -10px...
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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