CSS Odpowiedni sposób centrowania treści

Preferuję pracę z projektem opartym na CSS, ale jako bardziej zaawansowany koder mój umiejętności CSS są nieco słabe. Kiedy angażuję się w układ, mam tendencję do powrotu do formatowania opartego na tabelach, ponieważ mój umysł został wypaczony przez lata nadużyć opartych na tabelach. Jest jeden szczególny problem, który zawsze potykam. Co jest najlepszą alternatywą dla CSS:CSS Odpowiedni sposób centrowania treści

<table width="100%"> 
    <tr> 
     <td align="center"> 
      content goes here 
     </td> 
    </tr> 
</table>

czasami użyć:

<div style="width:100%; text-align:center">content</div>

Ale to nie wydaje się całkiem dobrze. Nie próbuję wyrównywać tekstu, próbuję dopasować zawartość. Wydaje się, że ma to również wpływ na wyrównanie tekstu zamkniętych elementów, co wymaga poprawienia poprawki. Jedną z rzeczy, których nie otrzymuję, jest: dlaczego nie ma float: centrum stylu? Wygląda na to, że byłoby to najlepsze rozwiązanie. Mam nadzieję, że czegoś brakuje i jest na to doskonały sposób na CSS.

Źródło

2009-04-06 Paul Keister

Masz rację, że text-align jest przeznaczony do wyrównywania tekstu. W rzeczywistości tylko Internet Explorer pozwala ci na umieszczenie w nim czegoś innego niż tekst. Każda inna przeglądarka obsługuje to poprawnie i nie pozwala na blokowanie elementów pod wpływem text-align.

Do centrowania elementów bloków za pomocą css używa się margin: 0 auto;, tak jak zasugerował Joe Philllips. Chociaż w ogóle nie musisz utrzymywać stołu.

Powodem braku float: center; jest to, że ruchome ma na celu umieszczenie elementów (zazwyczaj obrazów) w lewo lub w prawo i przepływ tekstu wokół nich. Unoszenie czegoś w środku nie ma sensu w tym kontekście, ponieważ oznaczałoby to, że tekst musiałby płynąć po obu stronach elementu.

Źródło

2009-04-06 19:07:08 Guffa

Przyjemny połów ze stołem. Nie patrzyłem na to wystarczająco uważnie. –

Cześć dzięki odpowiedź, pomaga. Ale w jaki sposób 'margin: 0 auto;' robi magię, nie rozumiem, dlaczego zero i auto wartość będą stanowić centrum tabeli? – GMsoF

@GMsoF: zero jest pionowym marginesem, a auto jest marginesem poziomym. 'margin: 0 auto;' jest krótką formą 'margin: 0 auto 0 auto;', która jest krótką formą 'margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; '. – Guffa

Polecam wstawiając <div> do swojej <td> i ustawiając atrybut stylu do style="width: 200px; margin: 0 auto;"

Połów jest, że trzeba ustawić stałą szerokość.

Edytuj: Po ponownym przeanalizowaniu pytania, polecam całkowite zbicie stołu. Po prostu skorzystaj z <div style="width: 200px; margin: 0 auto;>, tak jak zasugerowałem i nie potrzebuję stołu.

Źródło

2009-04-06 18:43:22

Hi dzięki odpowiedź, że to pomaga. Ale jak margines: 0 auto; czy magia, nie rozumiem, dlaczego zero i auto wartość będą stanowić środek stołu? – GMsoF

Odpowiedź d03boy jest poprawna dla właściwej metody centrowania rzeczy.

Aby odpowiedzieć na twój drugi komentarz, "Wydaje się, że ma to również wpływ na wyrównanie tekstu zamkniętych elementów, co wymaga poprawienia poprawki." Taka jest natura działania CSS, ustawienie właściwości elementu wpływa na wszystkie jego elementy potomne, chyba że właściwość jest nadpisywana przez jeden z nich (zakładając, że właściwość to oczywiście ta, która jest inherited).

Źródło

2009-04-06 18:50:33

Gdzie często się to robi? Dla mnie - ja najczęściej próbuje wyśrodkować całą konstrukcję w miejscu, więc zwykle to zrobić:

<html> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    </div> 
    </div> 
    </body> 
</html> 


body {text-align:center;} 
#wrapper {margin:0 auto; text-align:left; width:980px;}

ten skoncentruje całą konstrukcję na stronie na 980px szerokości, jednocześnie pozostawiając cały tekst wyrównane do lewej (o ile ten tekst znajduje się w elemencie #wrapper).

Źródło

2009-04-06 18:58:17

Oto dobry zasób do centrowania za pomocą CSS.
http://www.w3.org/Style/Examples/007/center
To pokazuje jak wyśrodkować tekst, bloki, obrazy i jak wyśrodkować je w pionie.

Źródło

2009-04-06 19:11:32

użytkowania display:inline-block włączyć text-align:center Content Center i bez stałej szerokości

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Centering</title> 

    <style type="text/css"> 
    .container { text-align:center; } 

    /* Percentage width */ 
    .wrapper { width: 99%; } 

    /* Use inline-block for wrapper */ 
    .wrapper { display: inline-block; } 

    /* Use inline for content */ 
    .content { display:inline; } 
    </style> 

</head> 
<body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div>abc</div> 
      <div>xyz</div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Źródło

2012-10-20 22:04:34

To miła sztuczka! –

CSS Odpowiedni sposób centrowania treści

Odpowiedz

Powiązane problemy