HTML: Reemplazo por <center>

Question

Siempre pensé que al reemplazar la etiqueta <center> con <div style="text-align:center;"> obtendré los mismos resultados. Aparentemente estaba equivocado.

Esta es una parte de mi HTML: (También puedes verlo en acción en la página que he creado para esta pregunta: 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> 

Quiero hacer 2 cosas:

1. Deshágase de la etiqueta <center> mientras mantiene la div en el centro de la página
2. Asegúrese de que el borde y el color de fondo del DIV externo afecten al spa interno ns.

ACTUALIZACIÓN: Se completa el objetivo 1. Tiempo para el objetivo n. ° 2.

Answer 1

Uso margin: 0 auto; encerrando en su <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.

Referencia: CSS: centering things

Answer 2

contenido Inline está alineado con el texto-align, contenido de bloque está alineado con los márgenes (conjunto de auto para el caso de un centrado). Ver Centring Using CSS.

Answer 3

Si está tratando de centrar el div en la página, suelo utilizar este método para dividir mi página principal.

haciendo que el posicionamiento a la izquierda sea del 50% y margine hacia la mitad izquierda del ancho del div.

ejemplo a continuación.

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

Answer 4

Si desea simplemente centrar el texto, que este estilo css:

text-align:center; 

Sin embargo, si usted está buscando para centrar el elemento o div sí, hay bastantes algunas soluciones para que , un ser a continuación:

.mydiv 
{ 
    margin:0 auto; 
} 

o incluso con algo como esto:

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

o incluso con algo como esto:

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

Como puede ver, no puede haber más posibilidades.

Answer 5

Prueba de esto, se ha trabajado para mí cuando me gustaría que todavía tenía que

<center> 

etiqueta

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