HTML: Thay thế cho <center>

Question

Tôi luôn nghĩ rằng việc thay thế thẻ <center> bằng <div style="text-align:center;"> sẽ mang lại cho tôi kết quả tương tự. Rõ ràng tôi đã sai.

Đây là một phần của HTML của tôi: (bạn cũng có thể nhìn thấy nó trong hành động trong trang tôi đã tạo cho câu hỏi này: http://www.moviez.4pu.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> 

tôi muốn làm 2 điều:

1. Thoát khỏi thẻ <center> trong khi vẫn giữ div ở giữa trang.
2. Đảm bảo màu nền và đường viền DIV bên ngoài ảnh hưởng đến spa bên trong ns.

CẬP NHẬT: Mục tiêu 1 được hoàn thành. Thời gian cho mục tiêu số 2.

Answer 1

Sử dụng margin: 0 auto; trên kèm theo của bạn <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.

tham khảo: CSS: centering things

Answer 2

nội dung Inline được liên kết với text-align, nội dung khối được liên kết với lợi nhuận (các thiết lập để tự động đối với trường hợp định tâm). Xem Centring Using CSS.

Answer 3

nếu bạn đang cố gắng căn giữa div trên trang, tôi thường sử dụng phương pháp này cho div gói chính của mình để căn giữa trang.

đặt vị trí bên trái ở 50% và sau đó lề lại nửa trái chiều rộng của div.

ví dụ bên dưới.

#mainspace { 
    position:absolute; 
    left:50%; 
    margin-left:-450px; 
    height:auto; 
    width:900px; 
    border:none; 
    } 

Answer 4

Nếu bạn muốn chỉ đơn giản là tập trung các văn bản, bạn này css phong cách:

text-align:center; 

Tuy nhiên, nếu bạn đang tìm kiếm để tập trung phần tử hoặc div riêng của mình, có khá một số giải pháp cho điều đó , một trong những con người dưới đây:

.mydiv 
{ 
    margin:0 auto; 
} 

Hoặc thậm chí với một cái gì đó như thế này:

.mydiv 
{ 
    width:300px; // the width can sometimes be ignored based on inherent size of element. 
    margin-left:auto; 
    margin-right:auto; 
} 

Hoặc thậm chí với một cái gì đó như thế này:

.mydiv 
{ 
    margin-left:50%; 
    margin-right:50%; 
} 

Vì vậy, bạn thấy, có thể có khả năng hơn.

Answer 5

Hãy thử điều này, nó đã làm việc cho tôi khi tôi muốn tôi vẫn còn đó

<center> 

thẻ

< p style="text:align-center" > example image or text </p >