¿El centro de alineación del intervalo HTML no funciona?

107

Tengo algo de HTML:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

El Div está cambiando el espaciado en mi documento, así que quiero usar un lapso para esto.

Pero span no está centralizando los contenidos:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

¿Cómo puedo solucionar esto?

EDITAR:

Mi código completo:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>
html css David19801
fuente
1
¿Tu div está "cambiando el espaciado"? ¿Qué quiere decir con esto? Y su intervalo no lo hará porque de forma predeterminada es un elemento en línea , mientras que un div es un elemento de nivel de bloque .
Bojangles
Hola JamWaffles, Por "espaciado" me refiero a que el div agrega espacio por encima y por debajo del contenido. El tramo no hace esto.
David19801
Use Firebug o el inspector de Chrome para ver qué reglas CSS se aplican a su elemento y busque la que agrega relleno o margen. También es posible que los elementos circundantes tengan relleno / margen.
Bojangles
5
text-align=centerdebe sertext-align:center
n611x007

Respuestas:

197

Un div es un elemento de bloque y abarcará el ancho del contenedor a menos que se establezca un ancho. Un tramo es un elemento en línea y tendrá el ancho del texto dentro. Actualmente, está intentando establecer la alineación como una propiedad CSS. Alinear es un atributo.

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

Sin embargo, el atributo de alineación está obsoleto. Debe usar la text-alignpropiedad CSS en el contenedor.

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>
Será
fuente
46

Utilice el siguiente estilo. margin:autonormalmente se utiliza para centrar la alineación del contenido. display:tablees necesario para el spanelemento

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
Chris J
fuente
37

El alignatributo está obsoleto. Utilice CSS en su text-alignlugar. Además, el intervalo no centrará el texto a menos que use display:blocko display:inline-blocky establezca un valor para el ancho, pero luego se comportará de la misma manera que un div (elemento de bloque).

¿Puedes publicar un ejemplo de tu diseño? Utilice www.jsfiddle.net

Lucifer Sam
fuente
¡Funcionó muy bien! Gracias.
dallinchase
¿No puedo alinear dos elementos en línea de manera diferente mientras los mantengo en línea?
Daniel Springer
11 
span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

Para mí funcionó muy bien. prueba esto también

AIMABLE
fuente
2

Además de todas las otras explicaciones, creo que está usando el "="signo igual , en lugar de dos puntos ":":

<span style="border:1px solid red;text-align=center">

Debería ser:

<span style="border:1px solid red;text-align:center">
nhazean
fuente
1

Span es un bloque en línea y se ajusta al tamaño del texto en línea, con una tenacidad que bloquea la mayoría de los esfuerzos de estilo fuera del contexto en línea. Para simplificar el estilo de diseño (limitar los conflictos), agregue div a la etiqueta 'p' con salto de línea.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
Mark Stewart
fuente
-7

Solo utilícelo word-wrap:break-word;en css. Funciona.

Lun
fuente