Invision Power Services > why does image kill vertical alignment?

Full Version: why does image kill vertical alignment?

Invision Power Services > Community Forums > Community Web Design and Coding

Trel

Apr 3 2005, 02:04 AM

In this code

CODE

<td height="70px" width="70%" style="vertical-align: middle;">
<a href="http://www.google.com">
Google - 14
</a><img src="http://www.google.com/images/logo_sm.gif">
</td>

the text is aligned to the bottom of the cell, however if I remove

CODE

then the text is vertically alligned to the middle as I specified

why does this happen?

IAIHMB

Apr 3 2005, 02:25 AM

Edit: Stupidity, talking and thinking is bad.

Luke

Apr 3 2005, 02:33 AM

try valign="middle" instead of style="..."

IAIHMB

Apr 3 2005, 02:35 AM

I figured it out, I think. The height you defined for the table cell is 70 pixels, the height of the image is 55 pixels, and the text takes up pretty much all of the remaining space. Even thought it's aligned to the middle, you can hardly tell, because most of the space has been taken up.

Trel

Apr 3 2005, 04:31 AM

QUOTE(IAIHMB @ Apr 2 2005, 09:35 PM)

I don't have them on separate lines, what you said would make since if it were

CODE

</a> <img src="http://www.google.com/images/logo_sm.gif">

but I have

CODE

</a><img src="http://www.google.com/images/logo_sm.gif">

Garciaa

Apr 3 2005, 05:03 AM

I think since the text wants to move up but the image is in the way. But when you center it, it goes directly up and not under the google image.

I simply did this I don't know if it helps you.

CODE

<td height="70px" width="70%" >
<center>
<a href="http://www.google.com">
Google - 14
</a></center><img src="http://www.google.com/images/logo_sm.gif">
</td>

Trel

Apr 3 2005, 05:11 AM

I'm not trying to center it side to side, but up and down.

Garciaa

Apr 3 2005, 05:19 AM

So you want something like Image and then the link on the bottom. Or. You want the image an then the link in the middle of the image.

Trel

Apr 3 2005, 05:33 AM

What I get is

Text Bottom Aligned and then Image so essentially text is next to the bottom of the image.

What I want is to have the text aligned to the center of the cell which in this case would be center of the image.

What happens is if I remove the <img src......> the text will be aligned correctly in the middle of the cell vertically but once I put the image there, the text switches to being bottom aligned.

IAIHMB

Apr 3 2005, 05:34 AM

You will have to post the code that you are working with, and what you result you want. As far as we know 70% could be 10 pixels...

Trel

Apr 3 2005, 05:52 AM

QUOTE(IAIHMB @ Apr 3 2005, 12:34 AM)

You will have to post the code that you are working with, and what you result you want. As far as we know 70% could be 10 pixels...

70% refers to the width

The height of the column is 70px
I'm trying to align the text up and down, here, I'll post screenshots.

With the image
Click to view attachment

Without the image
Click to view attachment

I want the text to be aligned in the middle like that, but each time I add the image, it moves down.

Garciaa

Apr 3 2005, 06:02 AM

Ok now i did this using the .html file + .css file.

Here is html

CODE

<td>

<div id="google"> <a href="http://www.google.com">Google - 14</a></div>
</td>

Now made a .css file and put this in

CODE

#google {
text-align: center;
background-image: url(http://www.google.com/images/logo_sm.gif);
height: 55px;
width: 150px;
}

Now be sure to change the file name in the html file when changing the name of the css file for it can work properly.

Edit:
Be sure to put this in your <head> tag in the html file
<link href="blah.css" rel="stylesheet" type="text/css" media="all">

change blah.css to what ever you named the .css file.

IAIHMB

Apr 3 2005, 06:10 AM

I knew that much, I actually meant what you were doing in general, as using tables for non tabular data isn't a good idea.

You can always try to float the image, that's why floating was created. So, something like:

CODE

#google img {
float: right;
}

If necessary, you could use margins, or even negative margins, to accomplish exactly what you want.

Garciaa

Apr 3 2005, 06:14 AM

Also you can always use this to.

CODE

#google {
position: absolute;
top: 26%
left: 45%
}

Just change the percents to what you want it to be.

Payton

Apr 3 2005, 08:13 AM

Did you try doing...

CODE

<td height="70px" width="70%" style="line-height: 70px">
<a href="http://www.google.com">
Google - 14
</a><img src="http://www.google.com/images/logo_sm.gif">
</td>

or.....

CODE

<td height="70px" width="70%">
<a href="http://www.google.com">
Google - 14
</a><img src="http://www.google.com/images/logo_sm.gif" style="vertical-align: middle">
</td>

try those

Trel

Apr 3 2005, 02:34 PM

QUOTE(Payton @ Apr 3 2005, 03:13 AM)

CODE

<td height="70px" width="70%">
<a href="http://www.google.com">
Google - 14
</a><img src="http://www.google.com/images/logo_sm.gif" style="vertical-align: middle">
</td>

try those

That on gives me the desired effect. Thank you

(and thank you everyone else for the help) That brings up the question, why does that work though and why does the text get stuck to the image and the image ignore the <td>'s vertical alignment

Apr 3 2005, 03:43 PM

It's not ignored, the text just always aligns to the bottom of the image...

Payton

Apr 4 2005, 10:06 PM

QUOTE(Trel @ Apr 3 2005, 06:34 AM)

That on gives me the desired effect. Thank you

(and thank you everyone else for the help) That brings up the question, why does that work though and why does the text get stuck to the image and the image ignore the <td>'s vertical alignment

It works because it has to do with the alignment of the image, rather than the text. Somehow the text is relative to the image as far as alignment goes. I'm not sure why it works, but that's the way to do it

Glad I could help.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.