CSS

Text-align

  • 2007-05-28 16:16
  • 0 komentarzy
  • 1955 odsłon
  • Oceń ten tekst jako pierwszy
text-align - ustala poziome wyrównanie tekstu w znaczniku, możliwe wartości:
  • left - wyrównanie do lewej
  • right - wyrównanie do prawej
  • justify - wyrównanie do lewej i prawej
  • łańcuch tekstu - nazwa komórki w tabeli do której tekst ma być wyrównany
  • inherit - przejęcie wartości rodzica
Jeżeli tekst jest napisany w kierunku od lewej do prawej domyślna wartość to left, w przeciwnym wypadku right

Polecenia pokrewne


Odpowiednik html


Wersja specyfikacji


  • CSS 1
  • wartość w postaci łańcucha tekstu pochodzi ze specyfikacji CSS 2, jednak w CSS 2.1 została usunięta
  • wartość inherit pochodzi ze specyfikacji CSS 2
  • w CSS 3 mogą zostać dodane dwie wartości start i end ustalające położenie w elemencie typu inline

Wsparcie przeglądarek


Internet Explorer 6 nieprawidłowo interpretuje znacznik

<div id="pojemnik">
    foo foo foo foo
    <div id="element">bar</div>
</div>


#pojemnik 
{
    text-align: center;
    width: 200px; height: 100px;
    border: 1px solid green;
}
#element 
{
    border: 1px solid red;
    width: 100px;
}


W tym kodzie tekst w "pojemniku" zostaje wyśrodkowany, elementy wewnątrz ("element") przejmują po nim tą właściwość i również wyśrodkowują tekst. Jednak one same nie powinny zostać wyśrodkowane względem pojemnika. Można je wyśrodkować stosując konstrukcje "margin: auto;". Intenet Explorer traktuje jednak elementy w bloku tak jakby były tekstem. Ilustruje to obrazek:



Taka sytuacja występuje często podczas projektowanie strony. Gdy chcemy aby główny element layoutu był wyśrodkowany wystarczy napisać:

<body>
    <div style="margin: auto;">strona</div>
</body>


w IE6 należy dodatkowo napisać:

<body style="text-align: center;">
    <div style="margin: auto; text-align: left;">strona</div>
</body>