Il centro di allineamento dell'estensione HTML non funziona?


107

Ho un po 'di HTML:

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

Il Div sta modificando la spaziatura sul mio documento, quindi desidero utilizzare un intervallo per questo.

Ma span non centralizza i contenuti:

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

Come lo risolvo?

MODIFICARE:

Il mio codice 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
Il tuo div sta "cambiando la spaziatura"? Cosa intendi con questo? E il tuo span non lo farà perché per impostazione predefinita è un elemento inline , mentre un div è un elemento a livello di blocco .
Bojangles

Ciao JamWaffles, Per "spaziatura" intendo che il div aggiunge spazio sopra e sotto il contenuto. Lo span non lo fa.
David19801

Utilizza Firebug o l'ispettore di Chrome per vedere quali regole CSS sono applicate al tuo elemento e cerca quella che aggiunge spaziatura interna o margine. È anche possibile che gli elementi circostanti abbiano imbottitura / margine.
Bojangles

5
text-align=centerdovrebbe esseretext-align:center
n611x007

Risposte:


197

Un div è un elemento di blocco e coprirà la larghezza del contenitore a meno che non sia impostata una larghezza. Uno span è un elemento inline e avrà la larghezza del testo al suo interno. Attualmente stai tentando di impostare align come proprietà CSS. L'allineamento è un attributo.

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

Tuttavia, l'attributo align è deprecato. Dovresti usare la text-alignproprietà CSS sul contenitore.

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

47

Si prega di utilizzare il seguente stile. margin:autonormalmente utilizzato per centrare allinea il contenuto. display:tableè necessario per spanelement

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

37

L' alignattributo è deprecato. Usa text-aligninvece CSS . Inoltre, lo span non centrerà il testo a meno che non si utilizzi display:blocko display:inline-blocke si imposti un valore per la larghezza, ma in tal caso si comporterà come un div (elemento di blocco).

Puoi pubblicare un esempio del tuo layout? Usa www.jsfiddle.net


Ha funzionato alla grande! Grazie.
Dallinchase

Non posso allineare due elementi in linea in modo diverso mantenendoli in linea?
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>

Per me ha funzionato molto bene. prova anche questo


2

Oltre a tutte le altre spiegazioni, credo che tu stia usando il "="segno di uguale , invece dei due punti ":":

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

Dovrebbe essere:

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

1

Span è inline-block e si adatta alla dimensione del testo inline, con una tenacia che blocca la maggior parte degli sforzi per lo stile fuori dal contesto inline. Per semplificare lo stile di layout (limitare i conflitti), aggiungi div al tag "p" con interruzione di riga.

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

-7

Basta usare word-wrap:break-word;nel css. Funziona.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.