O centro de alinhamento de span HTML não está funcionando?

107

Eu tenho algum HTML:

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

O Div está mudando o espaçamento no meu documento, então, quero usar um intervalo para isso.

Mas o span não está centralizando o conteúdo:

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

Como faço para corrigir isso?

EDITAR:

Meu 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
fonte
1
Seu div está "mudando o espaçamento"? O que você quer dizer com isso? E seu span não vai porque, por padrão, é um elemento embutido , enquanto um div é um elemento de nível de bloco .
Bojangles
Olá JamWaffles, Por "espaçamento" quero dizer que o div adiciona espaço acima e abaixo do conteúdo. A extensão não faz isso.
David19801
Use o Firebug ou o inspetor do Chrome para ver quais regras CSS são aplicadas ao seu elemento e procure aquela que adiciona preenchimento ou margem. Também é possível que os elementos ao redor tenham preenchimento / margem.
Bojangles
5
text-align=centerdeveria sertext-align:center
n611x007

Respostas:

197

Um div é um elemento de bloco e abrangerá a largura do contêiner, a menos que uma largura seja definida. Um span é um elemento embutido e terá a largura do texto dentro dele. Atualmente, você está tentando definir o alinhamento como uma propriedade CSS. Alinhar é um atributo.

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

No entanto, o atributo align está obsoleto. Você deve usar a text-alignpropriedade CSS no contêiner.

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

Use o seguinte estilo. margin:autonormalmente usado para centralizar o alinhamento do conteúdo. display:tableé necessário para o spanelemento

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

O alignatributo está obsoleto. Em text-alignvez disso, use CSS . Além disso, a extensão não centralizará o texto, a menos que você use display:blockoudisplay:inline-block e defina um valor para a largura, mas se comportará da mesma forma que um div (elemento de bloco).

Você pode postar um exemplo do seu layout? Use www.jsfiddle.net

Lúcifer Sam
fonte
Funcionou muito bem! Obrigado.
dallinchase
Não posso alinhar dois elementos embutidos de forma diferente, mantendo-os elementos embutidos?
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 mim funcionou muito bem. tente isso também

AIMABLE
fonte
2

Além de todas as outras explicações, acredito que você está usando o "="sinal de igual , em vez de dois pontos ":":

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

Deveria ser:

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

Span é inline-block e se ajusta ao tamanho do texto inline, com uma tenacidade que bloqueia a maioria dos esforços para estilizar fora do contexto inline. Para simplificar o estilo de layout (limitar os conflitos), adicione div à tag 'p' com quebra de linha.

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

Basta usar word-wrap:break-word;no css. Funciona.

seg
fonte