Center tags in XHTML

windows · Jan 10, 2008

I am trying to center some things in my XHTML document. 
 
One is a horizontal text menu..I couldn't use the "align" tags as they aren't recognized by the W3C Validator. 
 
I also tried to do the same when centering text with an image. 
While both "work" it isn't considered valid. 
 
I am having a hard time finding examples on the W3C site..they seem to delight in being ambiguous. 
 
Since HTML tags differ form ones in XHTML..what tag is needed to center a small bit of text or center some text with an image, sort of like this example here: 
 
 
An image 
<img src =http://www.webdeveloper.com/forum/archive/index.php/"/images/xhtml.gif" align="middle" width="100" height="50"> 
in the text 
 
 
I also used this code to center my horizontal text menu: 
<center><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photoshop.htm">Photoshop Images</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"flash.htm">Flash Images</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pencil.htm">Pencil Images</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about">About this Site</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"email.htm">E-Mail Me</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"tips.htm">Tips</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links.htm">Links</a> |</center> 
 
Some of the tags I used were from the "Master Visually HTML 4 and XHTML1" Guess they aren't accurate either.you can use the css version 
<div style="text-align:center;"> 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"photoshop.htm">Photoshop Images</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"flash.htm">Flash Images</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"pencil.htm">Pencil Images</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"about">About this Site</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"email.htm">E-Mail Me</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"tips.htm">Tips</a> | 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"links.htm">Links</a> |</div>for the image part: 
xhtml: 
 
 
An image 
<img src =http://www.webdeveloper.com/forum/archive/index.php/"/images/xhtml.gif" align="middle" width="100" height="50" /> 
in the text 
 
 
css: 
 
.centered{ 
margin:0px auto; 
text-align:center; 
} 
 
for the links: 
xhtml: 
 
<ul> 
<li class="first"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"photoshop.htm">Photoshop Images</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"flash.htm">Flash Images</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"pencil.htm">Pencil Images</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about">About this Site</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"email.htm">E-Mail Me</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"tips.htm">Tips</a></li> 
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"links.htm">Links</a></li> 
</ul> 
 
css: 
 
ul{ 
list-style-type:none; 
margin:0px auto; 
padding:0px; 
} 
ul li{ 
display:inline; 
border-left:1px solid black; 
} 
ul li.first{ 
border:0px; 
}Thanks IncaWarrior, it works AND validates..way cool!

What about the aligning an image in text? 
Here is what I used: 
 This page is valid 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check/referer"><img 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/valid-xhtml11.gif" align="middle" 
alt="Valid XHTML 1.1!" height="31" width="88" /></a> 
 
 
Can a div tag be used there too and how since the text is in front of the image?Oops..nevermind..thanks Samij..both XHTML and CSS are needed at the same time, eh? 
 
Okay..thanks a bunch you guys....I know it seems like a dippy question but I just do not know these things. Thanks.

Samij..thanks..but also what I am looking for is to center the text along the image...y'know...ummm..the test is aligned with the center of the image....can the same div tag be used just for the text or does that get really messy?glad to help... 
Not that you should use an unordered list for a nav, as that's all a nav really is (an unordered list of links). (see my example above)except you wouldn't use a list on a horizontal text menuyes, you would: 
<a class="postlink" href="http://www.ryanbrill.com">http://www.ryanbrill.com</a> 
<a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a> 
<a class="postlink" href="http://www.zeldman.com">http://www.zeldman.com</a> 
note the source codeI tried it with both the <li> tags and the tags..I just got bulleted and underlined lists...

full source? 
and you did apply the css I gave with the example, correct?I did now..I forgot the CSS...so I got your code Samij and IncaWarriors. Looks really cool..I'll be back in a min..gonna go get it validated. 
 
Cool! It validates too...wasn't sure with all the code combos..thanks. 
 
Umm...I hate to be pushy but what about the issue of center aligning text with an image?my code didn't do that?Well..it didn't quite do what I needed. 
 
Here is what I had originally: 
 This page is valid 
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check/referer"><img 
src=http://www.webdeveloper.com/forum/archive/index.php/"images/valid-xhtml11.gif" align="middle" 
alt="Valid XHTML 1.1!" height="31" width="88" /></a> 
 
 
 
You can copy it into a html doc to see what I mean...I don't know yet how to add an attachment that opens into a HTML doc yet. 
 
I guess the "align="middle" is a deprecated tag.and whats the goal there? text centered image not? image centered text not? both centered?Here is what I am trying to do..providing it works, that is.Originally posted by IncaWarrior 
except you wouldn't use a list on a horizontal text menu As samij586 said, it doesn't matter how it is layed out on your page (vertically or horizontally), it should be a list either way. This is why CSS is so useful - it allows us to use the (X)HTML tags for what they were originally meant for - markup.So what's the problem?

Center tags in XHTML

windows

Guest