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

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