vertical-align: middle

[Danfoord]

Why isn't this putting the image in the vertically middle of the div.centre?
It's align nicely in the middle of the div but stuck to the top.
Padding of 3% gives a reasonable approximation but I think the vertical-align middle should work in Firefox.



div.indexdivs {
height:100%;

}

#centre {
float:left;
width:66%;
margin-left:3%;
text-align:center;
border:double;
display:table-cell;
vertical-align:middle;
}
<div class="indexdivs" id="centre">
<img height="698" src="Index.jpg" width="532" usemap="#NotNamed">
</div>


Thanks

Dan

[BoldUlysses]

vertical-align isn't intended to vertically center block-level elements, but to vertically center images in an inline element.

Good runthrough here (http://phrogz.net/CSS/vertical-align/index.html).

[SnoringFrog]

<div class="indexdivs" id="centre">
<img align="middle" id="image" height="698" src="Index.jpg" width="532" usemap="#NotNamed">
</div>

That should take care of that, and you can drop the 'vertical-align' stuff from your CSS.

[_Aerospace_Eng_]

There is no align property in CSS. Try this
div.indexdivs {
height:100%;

}

#centre {
float:left;
width:66%;
margin-left:3%;
text-align:center;
border:double;
line-height:698px;
}
However now you can't have any text in that div.

[Danfoord]

Thanks but NONE of them have even so much as moved the image and I have treid all the methods suggested.

Any more suggestions?

What is an inline image?

Thanks

Dan

[Danfoord]

No, I have an image in the div which I need to centre vertically.

[_Aerospace_Eng_]

Please post a link to your page, its likely you are doing something incorrectly.

[Danfoord]

Thanks for taking a look:

http://www.danfoord.darrenkisner.co.uk/Test/Kevs%20site.html

There are no images or working links but it gives you and idea of the layout.

I'm using Firefox.


Dan

[_Aerospace_Eng_]

Sighs. You are asking how to vertically align an image yet you don't even supply the image for us?

Please do so. The problem with your layout is 100% height may not always be taller than the height of the image. The image needs to be smaller in height for what I gave you to work. If you want equal columns you'll need to use the faux columns technique (look it up).

[BoldUlysses]

Voila. Used "Method 1" as described on this page (http://phrogz.net/CSS/vertical-align/index.html).

body {
font-family: Arial;
background-image:url('photos/tissue.jpg')
}
h1 {
color:black;
font-family:Arial;
text-align:center;
}
li{
color:black;
text-align:center;
vertical-align:middle;

}

div.normal {
margin:0 auto;
width:100%;
text-align:center;

}
div.indexdivs {
height:100%;

}

#centre {
float:left;
width:66%;
margin-left:3%;
border:double;
line-height:698px;
position:relative;

}

#imgmap {
position:absolute;
top:50%;
left:50%;
margin-top:-349px;
margin-left:-271px;
}

#left {
float:left;
}
#right {
float:right;
}

#left, #right {
width:14%;
line-height:50px;
text-align:justify;
border:dashed;

}


img.reg {
height:80%;
}



area:visited {
background-color:red;
}



.kevsitelink {
font:arial;
color:black;
font-size:large;
text-decoration:none;
}

.hlink {
text-decoration:blink;
font:arial;
color:black;
font-size:large;

}

.kevsitelink:visited {
text-decoration:line-through;
color:red;
font-size:large;
}


But why vertically center an image larger than its containing div?

[Danfoord]

I put a blue border around the image so you could see where it was.I was trying to keep it as simple as possible, I didn't think you actually need to see the image source.

I know that it will only be viewed on a screen large enough for the height 100% to be bigger than the image.
Also equal columns aren't of concern since the other borders won't be there in the final version I just added them so I (you could see where the div's / images were)


Dan

[Danfoord]

The line height was a failed attempt at another work around.

I had managed to do it using padding but I thought there must be a way to use vert-align:middle.
It's peppered all over the internet as a way of aligning. eg
http://www.w3schools.com/Css/pr_pos_vertical-align.asp

I still don't really get why it doesn't work, or should that be that why so many tutorials mention it but as Aerospac_Eng says it isn't a CSS property. Having said that it was coming up in my development environment as an option.

Thankful but a little confused.


Dan

[oesxyl]

The line height was a failed attempt at another work around.

I had managed to do it using padding but I thought there must be a way to use vert-align:middle.
It's peppered all over the internet as a way of aligning. eg
http://www.w3schools.com/Css/pr_pos_vertical-align.asp

I still don't really get why it doesn't work, or should that be that why so many tutorials mention it but as Aerospac_Eng says it isn't a CSS property. Having said that it was coming up in my development environment as an option.

Thankful but a little confused.


Dan
have invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.danfoord.darrenkisner.co.uk%2FTest%2FKevs%2520site.html

many problem come from that.

regards

[_Aerospace_Eng_]

I said align wasn't wasn't a property. vertical-align works but only on inline elements. An element like a div or an element that is floated becomes an inline element. If you used it with a span or a link or a td cell vertical-align would work. display:table-cell isn't supported in to many browsers either.