Jump to content

Substitute for <center>


blogsmith
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;">

Link to comment
Share on other sites

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; }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...