asked on 7/20/2008

how to vertically align text inside a marquee

I need to have my marquee text right in the middle of the background image (vertically)

how is that possible?

<div id="banner">
 
<marquee direction="left" class = "banner" behavior="scroll" height="29px">
 
'D#.('1 'D,/J/) GF'
&nbsp;
<img src="images/yellowdot.gif" />
</marquee>
 
 
</div>

Last Comment

8/16/2008

7/20/2008

in your CSS stylesheet:

#banner img {
border: none;
vertical-align: middle;
}

if you would like to apply that style to all images (vertically aligned to text) just remove #banner. :)

Hope this helps

ChefMaha

7/21/2008

ASKER

thanks. But, unfortunately it did not change anything..

and besides, I need to also vertically align the text (not just the image)

rajanibajpai

7/21/2008

Hi
this is your code.
Just try it

<div id="banner">
 
<marquee direction="left" class = "banner" behavior="scroll" height="29px" align="middle">
 
'D#.('1 'D,/J/) GF'
&nbsp;
<img src="images/yellowdot.gif" />
</marquee>
 
 
</div>

Open in new window

ChefMaha

7/21/2008

ASKER

no change...

ok I guess the problem is that you don't have the image that I'm using.

I suggest you create a simple image with the height 29px, make it the background of your marquee, add some text to the marquee and then tell me if it works or not.

thanks for your help

ASKER CERTIFIED SOLUTION

Bruce Pieterse

7/23/2008

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Bruce Pieterse

7/25/2008

Hi ChefMaha,

Any luck with the above mentioned solution?

ChefMaha

8/16/2008

ASKER

I am very sorry for the late reply brucepieterse. But, I was on vacation and just got back!

thanks for the reply. I have tested your code and it worked perfectly. However, when I tried to increase the height of the marquee, the text and image were no longer middle vertically aligned.

so, in order to solve this issue, I put the background image in the div tag instead of the marquee tag. and that's when it started to work properly.

thanks for the push however. your solution helped me figure things out!

div#banner {
	margin: 0;
	padding: 5px 0;
	background: url('images/banner.gif') repeat-x;
	
}

Open in new window

ChefMaha

8/16/2008

ASKER

this answer helped me find the solution to my problem.
thanks expert =)