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:
<center>
tag while keeping the div in the center of the page.UPDATE: Objective 1 is completed. Time for objective #2.
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.
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!
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 .
To just center the text inside an element, use text-align: center; This text is centered.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With