...

View Full Version : Vertical Align - Pictures?



CaptainB
07-27-2007, 08:58 PM
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:


margin-top:50%;
position:relative;
margin-bottom:-50%

Would that be the soution for the images, or is there a better way?

medigerati
07-27-2007, 09:07 PM
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/cssproperties/vertical-align/


vertical-align: middle;

Good luck!

CaptainB
07-27-2007, 09:21 PM
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.

medigerati
07-27-2007, 09:36 PM
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:

<img src="image-here.jpg" alt="Image Description" height="200" width="100" id="image-in-middle" />

CSS:


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 (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html).

CaptainB
07-27-2007, 10:08 PM
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?


<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:


#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
}

effpeetee
07-27-2007, 10:52 PM
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.asp?filename=trycss_vertical-align

Frank

CaptainB
07-27-2007, 11:49 PM
I guess I'll just have to use padding. Thanks guys, for the answears.

effpeetee
07-28-2007, 12:37 AM
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

CaptainB
07-28-2007, 01:35 AM
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.

_Aerospace_Eng_
07-28-2007, 05:06 AM
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.


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

.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.

CaptainB
07-28-2007, 09:50 AM
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! :)

_Aerospace_Eng_
07-28-2007, 09:57 AM
-10x is not -10px...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum