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

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