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>

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>

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>

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


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


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">

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>

-7

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.