Centering cell content

Center with string/tag

[revuelta]

I am just new at CSS. I am trying to create a Style Sheet to visualize differently existing web pages. I am working on Mac 10.2.8 with Safari 1.0, IE 5.2, Mozilla 1.6b and Netscape 7.1.

The page contains a table with several columns and rows. I would like to center the cell content of every row taking as centering point the text between the tags <font color="red"> (see below). The purpose is that all instances of this text be aligned one below the previous as in a column. The tags of the row are the following (the content is mine):

<td valign="top">
<font face="Verdana" size="2">This is the left side
<font color="red">this should be at the center</font>this is the right side</font>
</td>

All the instances of the text "this should be at the center" should be visualized like a column.

I have tried to apply the "text-align: <string>" property, but I have been unable to make it work.

Thanks in advance for your help.

revuelta

[DrDoc]

Welcome to Webmaster World

I have tried to apply the "text-align: <string>" property, but I have been unable to make it work.

Actually, it does work. The text gets centered within the font tag. You just can't tell, since the font tag is an inline element. Try something like this:

<td valign="top" style="text-align: center;">
<div style="float: left;">This is the left side</div>
<div style="float: right;">this is the right side</div>
this should be at the center
</td>

[revuelta]

I didn't expect such a fast reaction! Thank you.

I'm afraid I haven't explained accurately enough my purpose. I don't want to modify the web pages themselves, that are not mine and change dynamically. They are just requests from a database available through internet. I just want to modify the visualization through CSS. Safari allows to apply user's Cascading Style Sheets upon web pages accesed though internet, so they are viewed as the user wants and not as they were created.

I just want to know how to write a CSS to visualize differently those existing pages. Till now I have written the following code:

/* CSS Document */

[face=Verdana] {
font-family: "Times Greek";
font-size: 14pt;
}

*[color=red] {
color: #3333FF;
font-size: 120%;
font-weight: bold;
font-family: "Times Greek";
font-variant: small-caps;
display: ;
text-align: center;

}

TD {
font-family: "TITUS Cyberbit Basic";
font-variant: normal;
}

I am sorry for such a long and confusion explanation. I am new.

Thank you for your time and patience. I do really appreciate.

Revuelta

[DrDoc]

Then it won't work as you would expect. You need to play with the left and right margin on the "centered" element... That's the only way you can increase the spacing between the grouped words without changing the markup.

[revuelta]

Thank anyway. I do really appreciate.

Revuelta