Centrum wyrównania zakresu HTML nie działa?

107

Mam trochę HTML:

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

Div zmienia odstępy w moim dokumencie, więc zamiast tego chcę użyć do tego zakresu.

Ale span nie centralizuje treści:

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

Jak to naprawić?

EDYTOWAĆ:

Mój pełny kod:

<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
źródło
1
Twój element div „zmienia odstępy”? Co przez to rozumiesz? A twój zakres nie będzie, ponieważ domyślnie jest to element inline , podczas gdy div jest elementem blokowym .
Bojangles
Cześć JamWaffles, Przez „odstępy” rozumiem, że div dodaje spację nad i pod zawartością. Rozpiętość tego nie robi.
David19801,
Użyj Firebuga lub inspektora Chrome, aby zobaczyć, jakie reguły CSS są zastosowane do Twojego elementu, i poszukaj tego, który dodaje dopełnienie lub margines. Możliwe jest również, że otaczające elementy mają dopełnienie / margines.
Bojangles
5
text-align=centerpowinno byćtext-align:center
n611x007

Odpowiedzi:

197

Element div jest elementem blokowym i będzie obejmował szerokość kontenera, chyba że ustawiono szerokość. Rozpiętość jest elementem wbudowanym i będzie miała szerokość tekstu w środku. Obecnie próbujesz ustawić wyrównanie jako właściwość CSS. Wyrównaj to atrybut.

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

Jednak atrybut align jest przestarzały. Powinieneś użyć text-alignwłaściwości CSS w kontenerze.

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>
Będzie
źródło
47

Użyj następującego stylu. margin:autozwykle używane do wyśrodkowania wyrównania zawartości. display:tablejest potrzebny dla spanelementu

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

alignAtrybut jest przestarzała. text-alignZamiast tego użyj CSS . Ponadto rozpiętość nie wyśrodkuje tekstu, chyba że użyjesz display:blocklub display:inline-blocki ustawisz wartość szerokości, ale wtedy będzie zachowywać się tak samo jak div (element blokowy).

Czy możesz opublikować przykład swojego układu? Użyj www.jsfiddle.net

Lucyfer Sam
źródło
Działało świetnie! Dzięki.
dallinchase
Czy nie mogę wyrównać dwóch elementów wbudowanych w inny sposób, zachowując je jako elementy wbudowane?
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>

U mnie to działało bardzo dobrze. spróbuj tego również

CEL
źródło
2

Oprócz wszystkich innych wyjaśnień uważam, że "="zamiast dwukropka używasz znaku równości ":":

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

Powinno być:

<span style="border:1px solid red;text-align:center">
nhazean
źródło
1

Span jest blokiem liniowym i dostosowuje się do rozmiaru tekstu w wierszu, z wytrzymałością, która blokuje większość wysiłków związanych z stylizacją poza kontekstem wbudowanym. Aby uprościć styl układu (ogranicz konflikty), dodaj element div do tagu „p” z podziałem wiersza.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
Mark Stewart
źródło
-7

Po prostu użyj word-wrap:break-word;w css. To działa.

pon
źródło