Substitute for <center>

[blogsmith]

I know tags like <font> has been depracated so now use <span style="color:red;">text</span> to color the text.However, I don't know what is the substitute for <center>. Can anybody help?ThanksPeterBlogger Tips and Tricks

[vchris]

you need to use css.text-align: center;

[blogsmith]

Like <span style="text-align:center">Text</span>?PeterBlogger Tips and Tricks

[king]

Like <span style="text-align:center">Text</span>?PeterBlogger Tips and Tricks

Well, no. Use the <div> tag instead. <div style="text-align: center">text</div>.

[Anders Moen]

But try to not use style="" because it gets very much code that's not necessary in the document :)Use CSS files.In example:CSS (Save this as style.css for now)

#some_name_one { width: 100%; text-align: center; }#some_name_two { width: 50%; text-align: center; }

(X)HTML

<div id="some_name_one">Here is some text :)</div><div id="some_name_two">Here is even more text</div>

[justsomeguy]

This deserves a little clarification about the box model. In HTML, elements can be inline elements or block elements. A span is an inline element, meaning that it can appear on the same line as text, and that the width of the inline element is equal to whatever is inside it. A div is an example of a block element, meaning that a div appears on its own line, or that normally you would not have content to the left or right of the div (CSS can override that). Block elements stretch the entire width of their container. So, you can either center the element itself, like centering the entire span inside another element, or you can center the content of the element, like centering the text that appears inside a div to be centered in the div. If you want to center the content of the element, you use the text-align property. If you want to center the element itself, you use the margin property:margin: 0 auto;So, either of these would center the image inside the div, using the different methods:<div style="text-align: center;"><img ...></div><div><img style="margin: 0 auto;"></div>

[croatiankid]

be aware that in order to center a block-level element, you must give it a width (this can be frustrating at times, making you have to have a container element).

[blogsmith]

Hi all, Thanks for the replies. Very grateful.I tested this <div style="text-align">These text shoudl be aligned in a blog post and it worked, though it appear to me that the text was slightly more to the right than exactly centered.I tried the same trick to center a Google sitesearch box in the blogArticles on Fitnesswith varing result. Below is the sript I used-----------------------------------------------------------------<div style="text-align:center;"><!-- SiteSearch Google --><form action="http://www.google.com/custom" target="google_window" method="get"><table border="0" bgcolor="#ffffff"><tr><td nowrap="nowrap" valign="top" height="32" align="left"><a href="http://www.google.com/"><img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif" align="middle"/></a></td><td nowrap="nowrap"><input value="articles-on-fitness.blogspot.com" name="domains" type="hidden"/><label for="sbi" style="display: none">Enter your search terms</label><input maxlength="255" id="sbi" value="" name="q" size="31" type="text"/><label for="sbb" style="display: none">Submit search form</label><input id="sbb" value="Search" name="sa" type="submit"/></td></tr><tr><td> </td><td nowrap="nowrap"><table><tr><td><input id="ss0" checked value="" name="sitesearch" type="radio"/><label for="ss0" title="Search the Web"><font color="#000000" size="-1">Web</font></label></td><td><input id="ss1" value="articles-on-fitness.blogspot.com" name="sitesearch" type="radio"/><label for="ss1" title="Search articles-on-fitness.blogspot.com"><font color="#000000" size="-1">articles-on-fitness.blogspot.com</font></label></td></tr></table><input value="pub-9404091704638" name="client" type="hidden"/><input value="1" name="forid" type="hidden"/><input value="ISO-8859-1" name="ie" type="hidden"/><input value="ISO-8859-1" name="oe" type="hidden"/><input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/><input value="en" name="hl" type="hidden"/></td></tr></table></form><!-- SiteSearch Google --></div>------------------------------------------------------------------and the following were the results:Internet Explorer 7: the search box was centeredFireFox, Opera, Flock: the search box was not centered.Anyone care to comment further?PeterBlogger Tips and Tricks

[blogsmith]

Typo. Should read:I tested this <div style="text-align">These text shoudl be center aligned</div> in a blog post and it worked, though it appear to me that the text was slightly more to the right than exactly centered.PeterDummies Guide to Google Blogger

[justsomeguy]

The reason it is not centering is because you are trying to center a block-level element, and block elements have 100% width, so centering them doesn't do anything. Specifically, the form element is a block element. I think a table is also block. The solution would probably be to make the form and table inline instead of block.<div style="text-align:center;"><!-- SiteSearch Google --><form action="http://www.google.com/custom" target="google_window" method="get" style="display: inline;"><table border="0" bgcolor="#ffffff" style="display: inline;">

[blogsmith]

Looks like that is not an option. We are not allowed to tamper with AdSense script.PeterBlogger Tips and Tricks

[justsomeguy]

Well, if you can't change anything then you can't fix it. You can put an id on the div and style the elements inside the div, but I don't know if that's "allowed".<div style="text-align:center;" id="inline_content">CSS:#inline_content form { display: inline; }#inline_content table { display: inline; }