Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML: Replacement for <center>

Tags:

html

xhtml

I always thought that replacing the <center> tag with <div style="text-align:center;"> will get me the same results. Apparently I was wrong.

This is a portion of my HTML: (you can also see it in action in the page I created for this question : http://www.catmoviez.com/ErrorPageSO.aspx

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
    <span style="width:560px;padding-right:10px;text-align:left;float:left;">
    <h1>Oops... We're sorry.</h1>

    <h3>You've just encountered an unknown error. <br /></h3>
    This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
    We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
    <br />
    <h3>
    You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.       
    </h3>
    </span><span style="width:180px;float:left;"><img src="Resources/Images/404.jpg" /></span>
</div>

I want to do 2 things:

  1. Get Rid of the <center> tag while keeping the div in the center of the page.
  2. Make sure the outer DIVs background color and border affect the inner spans.

UPDATE: Objective 1 is completed. Time for objective #2.

like image 871
Faruz Avatar asked Dec 18 '09 07:12

Faruz


People also ask

What can I use instead of center in HTML?

The HTML <center> element is found within the <body> tag. The <center> tag is obsolete in HTML5. Use the CSS text-align property instead to format the horizontal alignment of the text.

What is the HTML code for center?

One way to center text or put it in the middle of the page is to enclose it within <center></center> tags. Inserting this text within HTML code would yield the following result: Center this text!

Why was center removed HTML?

The <center> element was deprecated because it defines the presentation of its contents — it does not describe its contents. One method of centering is to set the margin-left and margin-right properties of the element to auto , and then set the parent element's text-align property to center .

How do you center the middle of HTML?

To just center the text inside an element, use text-align: center; This text is centered.


1 Answers

Use margin: 0 auto; on your enclosing <div>

<div style="margin: 0 auto; background-color:red;border:5px solid black;margin-top:5px;width:750px;text-align:center;">
  <span style="width:560px;padding-right:10px;text-align:left;">
  <h1>Oops... We're sorry.</h1>

  <h3>You've just encountered an unknown error. <br /></h3>
  This site is a work-in-progress, we have already been informed of the error and will do our best to fix it. <br />
  We would be thankful if you could contact us through the appropriate button and elaborate on what caused this error to appear.<br />
  <br />
  <h3>
  You can go back to the <a style="text-decoration:underline;" href="Default.aspx">Home page</a> and continue using Moviez.NET.           
  </h3>
  </span><span style="width:180px;"><img src="Resources/Images/404.jpg" /></span>
</div>

See it in action.

Reference: CSS: centering things

like image 174
Gregory Pakosz Avatar answered Oct 13 '22 12:10

Gregory Pakosz