HighDots Forums  

Vertical Align An Image

Go Back HighDots Forums Web-authoring Cascading Style Sheets Vertical Align An Image

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Vertical Align An Image in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
BillGatesFan
 
Posts: n/a

Default Vertical Align An Image - 02-06-2008 , 04:59 PM





Vertical-Align is not working in IE 7. Is there another way to align
an image vertically?

Code Below:

<style type="text/css">
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: middle
}
</style>
</head>

<body style="background-color:#d5ceca">
<img class="displayed" alt="" longdesc="" src="out.jpg" width="792"
height="612" /></td>

</body>



Thanks!

Reply With Quote
  #2  
Old   
Ben C
 
Posts: n/a

Default Re: Vertical Align An Image - 02-06-2008 , 05:13 PM





On 2008-02-06, BillGatesFan <klj_mcsd (AT) hotmail (DOT) com> wrote:
Quote:
Vertical-Align is not working in IE 7. Is there another way to align
an image vertically?

Code Below:

style type="text/css"
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
vertical-align: middle
}
/style
/head

body style="background-color:#d5ceca"
<img class="displayed" alt="" longdesc="" src="out.jpg" width="792"
height="612" /></td

/body
If your image is really in a <td>, then set vertical-align: middle on
the <td>, not on the img.

Vertical-align on an element that's display: block like your image means
nothing.

You can set vertical-align on table-cells or on inline elements, and it
means very different things. You probably want the table-cell one.

The HTML you've posted is obviously completely invalid by the way and I
assume not what you're really using!


Reply With Quote
  #3  
Old   
BillGatesFan
 
Posts: n/a

Default Re: Vertical Align An Image - 02-07-2008 , 09:03 AM


On Feb 6, 5:13*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
Quote:
On 2008-02-06, BillGatesFan <klj_m... (AT) hotmail (DOT) com> wrote:





Vertical-Align is not working in IE 7. Is there another way to align
an image vertically?

Code Below:

style type="text/css"
IMG.displayed {
* * display: block;
* * margin-left: auto;
* * margin-right: auto;
* * vertical-align: middle
* * }
/style
/head

body style="background-color:#d5ceca"
* * * * * *<img class="displayed" alt="" longdesc="" src="out.jpg" width="792"
height="612" /></td

/body

If your image is really in a <td>, then set vertical-align: middle on
the <td>, not on the img.

Vertical-align on an element that's display: block like your image means
nothing.

You can set vertical-align on table-cells or on inline elements, and it
means very different things. You probably want the table-cell one.

The HTML you've posted is obviously completely invalid by the way and I
assume not what you're really using!- Hide quoted text -

- Show quoted text -

This does not work either.

<table style="width: 100%">
<tr>
<td style="vertical-align:middle">

<img alt="" longdesc="" src="out.jpg" width="792" height="612" /></
td>
</tr>
</table>


Reply With Quote
  #4  
Old   
Ben C
 
Posts: n/a

Default Re: Vertical Align An Image - 02-07-2008 , 10:37 AM


On 2008-02-07, BillGatesFan <klj_mcsd (AT) hotmail (DOT) com> wrote:
Quote:
On Feb 6, 5:13*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
Vertical-Align is not working in IE 7. Is there another way to align
an image vertically?

style type="text/css"
IMG.displayed {
* * display: block;
* * margin-left: auto;
* * margin-right: auto;
* * vertical-align: middle
* * }
/style
/head
[...]
If your image is really in a <td>, then set vertical-align: middle on
the <td>, not on the img.
[...]
This does not work either.

table style="width: 100%"
<tr
<td style="vertical-align:middle"

<img alt="" longdesc="" src="out.jpg" width="792" height="612" /></
td
</tr
</table
Well with this example, the td is going to be no higher than the img
anyway, so vertical-align is academic.

What exactly do you expect to happen?


Reply With Quote
  #5  
Old   
BillGatesFan
 
Posts: n/a

Default Re: Vertical Align An Image - 02-07-2008 , 10:59 AM


On Feb 7, 10:37*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
Quote:
On 2008-02-07, BillGatesFan <klj_m... (AT) hotmail (DOT) com> wrote:







On Feb 6, 5:13*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
Vertical-Align is not working in IE 7. Is there another way to align
an image vertically?
style type="text/css"
IMG.displayed {
* * display: block;
* * margin-left: auto;
* * margin-right: auto;
* * vertical-align: middle
* * }
/style
/head
[...]
If your image is really in a <td>, then set vertical-align: middle on
the <td>, not on the img.
[...]
This does not work either.

table style="width: 100%"
* * * * * * * * * *<tr
* * * * * * * * * * * * * *<td style="vertical-align:middle"

* * * * * *<img *alt="" longdesc="" src="out.jpg" width="792" height="612" /></
td
* * * * * * * * * *</tr
* * * * * *</table

Well with this example, the td is going to be no higher than the img
anyway, so vertical-align is academic.

What exactly do you expect to happen?- Hide quoted text -

- Show quoted text -
I was expecting the table to span the whole page and not just the
image. So if I vertical-aligned the image it will show in the middle
of the page.


Reply With Quote
  #6  
Old   
prac
 
Posts: n/a

Default Re: Vertical Align An Image - 02-07-2008 , 11:18 AM



Hello

try this

http://www.jakpsatweb.cz/css/css-ver...-solution.html

---

http://philippe.chappuis.googlepages...e-page-creator

---

Reply With Quote
  #7  
Old   
Ben C
 
Posts: n/a

Default Re: Vertical Align An Image - 02-07-2008 , 11:48 AM


On 2008-02-07, BillGatesFan <klj_mcsd (AT) hotmail (DOT) com> wrote:
Quote:
On Feb 7, 10:37*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-02-07, BillGatesFan <klj_m... (AT) hotmail (DOT) com> wrote:
[...]
On Feb 6, 5:13*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
Vertical-Align is not working in IE 7. Is there another way to align
an image vertically?
style type="text/css"
IMG.displayed {
* * display: block;
* * margin-left: auto;
* * margin-right: auto;
* * vertical-align: middle
* * }
/style
/head
[...]
If your image is really in a <td>, then set vertical-align: middle on
the <td>, not on the img.
[...]
This does not work either.

table style="width: 100%"
* * * * * * * * * *<tr
* * * * * * * * * * * * * *<td style="vertical-align:middle"

* * * * * *<img *alt="" longdesc="" src="out.jpg" width="792" height="612" /></
td
* * * * * * * * * *</tr
* * * * * *</table

Well with this example, the td is going to be no higher than the img
anyway, so vertical-align is academic.

What exactly do you expect to happen?- Hide quoted text -

- Show quoted text -

I was expecting the table to span the whole page and not just the
image.
It does span the whole page horizontally, because you set width: 100%.

Quote:
So if I vertical-aligned the image it will show in the middle
of the page.
Vertical-align aligns things vertically. But your table spans the page
horizontally.

I'm sorry if I took for granted that you had a basic grasp of the
concept of two-dimensional space.

Perhaps you want

html, body, table { height: 100% }

Together with vertical-align: middle on the td that should put the image
in the middle of the page vertically.

If you also want the image in the middle horizontally, then don't set
width: 100% on the table, but do set margin: 0 auto on it.


Reply With Quote
  #8  
Old   
BillGatesFan
 
Posts: n/a

Default Re: Vertical Align An Image - 02-07-2008 , 01:35 PM


On Feb 7, 11:48*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
Quote:
On 2008-02-07, BillGatesFan <klj_m... (AT) hotmail (DOT) com> wrote:





On Feb 7, 10:37*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-02-07, BillGatesFan <klj_m... (AT) hotmail (DOT) com> wrote:
[...]
On Feb 6, 5:13*pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
[...]
Vertical-Align is not working in IE 7. Is there another way to align
an image vertically?
style type="text/css"
IMG.displayed {
* * display: block;
* * margin-left: auto;
* * margin-right: auto;
* * vertical-align: middle
* * }
/style
/head
[...]
If your image is really in a <td>, then set vertical-align: middle on
the <td>, not on the img.
[...]
This does not work either.

table style="width: 100%"
* * * * * * * * * *<tr
* * * * * * * * * * * * * *<td style="vertical-align:middle"

* * * * * *<img *alt="" longdesc="" src="out.jpg"width="792" height="612" /></
td
* * * * * * * * * *</tr
* * * * * *</table

Well with this example, the td is going to be no higher than the img
anyway, so vertical-align is academic.

What exactly do you expect to happen?- Hide quoted text -

- Show quoted text -

I was expecting the table to span the whole page and not just the
image.

It does span the whole page horizontally, because you set width: 100%.

So if I vertical-aligned the image it will show in the middle
of the page.

Vertical-align aligns things vertically. But your table spans the page
horizontally.

I'm sorry if I took for granted that you had a basic grasp of the
concept of two-dimensional space.

Perhaps you want

* * html, body, table { height: 100% }

Together with vertical-align: middle on the td that should put the image
in the middle of the page vertically.

If you also want the image in the middle horizontally, then don't set
width: 100% on the table, but do set margin: 0 auto on it.- Hide quoted text -

- Show quoted text -
Still did not work. lol


Reply With Quote
  #9  
Old   
Ben C
 
Posts: n/a

Default Re: Vertical Align An Image - 02-07-2008 , 04:46 PM


On 2008-02-07, BillGatesFan <klj_mcsd (AT) hotmail (DOT) com> wrote:
Quote:
On Feb 7, 11:48*am, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2008-02-07, BillGatesFan <klj_m... (AT) hotmail (DOT) com> wrote:
[...]
Vertical-Align is not working in IE 7. Is there another way to align
[...]
If your image is really in a <td>, then set vertical-align: middle on
the <td>, not on the img.
[...]
This does not work either.
[...]
What exactly do you expect to happen?- Hide quoted text -
[...]
I was expecting the table to span the whole page and not just the
image.

It does span the whole page horizontally, because you set width: 100%.

So if I vertical-aligned the image it will show in the middle
of the page.

Vertical-align aligns things vertically. But your table spans the page
horizontally.

I'm sorry if I took for granted that you had a basic grasp of the
concept of two-dimensional space.
[...]
Still did not work. lol
Now you need to post a URL to your test case.

It is possible you have finally not got everything wrong and in spite of
that it doesn't work in IE anyway.


Reply With Quote
Reply

« Previous Thread | Next Thread »



Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.


C++ Forums - MySQL Forums - Databases Forums - Hardware Forums - Borland Forums - Java Forums - Dotnet Forums - HighDots Forums - Archive - Top