Centrowanie w pionie za pomocą CSS

post_img

Wpis ten poświęcony jest centrowaniu w pionie elementów blokowych HTML za pomocą CSS.  Przedstawię w nim krótko, jak wycentrować dowolnego div-a w innym kontenerze. Rozwiązanie to uwzględnia wszystkie najpopularniejsze przeglądarki łącznie z IE6.

Struktura

Struktura HTML składa się z trzech elementów.

  • container – element który wyznacza nam obszar centrowania.
  • blockOuter – element przezroczysty, przejściowy służy tylko do pozycjonowania elementu docelowego.
  • blockInner – element docelowy, który jest centrowany, może zawierać dowolną treść.
1
2
3
4
5
6
7
<div class="container">
   <div class="blockOuter">
      <div class="blockInner">
         Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
      </div>
   </div>
</div>

Jak to działa?

W przeglądarkach kompatybilnych z CSS 2.1 sprawa jest dosyć prosta.
Rozwiązanie opiera się na atrybucie display. Formatujemy bloki, aby wyświetlały się jak tabelka i wypośrodkowujemy treść w pionie jak dla komórki tabeli.

1
2
3
4
5
6
7
.container {
display: table;         /* wyświetlanie jak tabela*/
}
.blockOuter {
display: table-cell;
vertical-align: middle; /* wypośrodkowywanie treści w pionie */
}

W przypadku przeglądarek IE6 i IE7 rozwiązanie jest bardziej skomplikowane.
Tu opiera się na atrybucie position. Ograniczeniem jest, że musimy mieć z góry określoną wysokość elementu container.
Element blockOuter ustawiamy tak, aby zaczynał się od połowy elementu container. Natomiast element blockInner przesuwamy o połowę elementu blockOuter. Te dwa zabiegi powodują, że element docelowy blockInner jest dokładnie na środku elementu container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
position: relative; /* pozycjonowanie relatywne tak aby był tutaj punkt odniesienia dla kolejnych bloków */
height: 300px;      /* ustawienie wysokości */
}

.blockOuter {
position: absolute; /* pozycjonowanie absolutne  */
top:50%;            /* przesuwamy element w dół dokładnie o połowę rodzica */
}

.blockInner {
position: relative;     /* pozycjonowanie relatywne */
top: -50%;          /* przesuwamy element w górę dokładnie o połowę rodzica  */
}

Teraz wystarczy oba rozwiązania połączyć w całość. Proponuję robić to za pomocą komentarza warunkowego w HTML – tak aby IE dostało dodatkowe/korygujące style. W efekcie uzyskujemy nowoczesny kod dla dobrych przeglądarek i modyfikujemy tylko starsze.

Gotowy przykład

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
#container {
    display: table;
    width: 600px;
    height: 300px;
    font: 12px Verdana;
    background: #e0e0e0;
    border: solid 1px #cccccc; 
}

#container .blockOuter {
    display: table-cell;
    vertical-align: middle;
}

#container .blockInner {
    width: 450px;
    margin: 0 auto;                 /*wyrównanie bloku w poziomie*/
    padding: 10px;
    background: #f0f0f0;
    border: solid 1px #cccccc;
}
</style>       

<!--[if lte IE 7]>
<style>
#container {
    position: relative;
}

#container .blockOuter {
    position: absolute;
    top:50%;
}

#container .blockInner {
    position: relative;
    top: -50%;
}
</style>   
<![endif]-->
</head>
<body>


<div id="container">
    <div class="blockOuter">
        <div class="blockInner">
            Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
            Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
            Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
            Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
            Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
            Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
            Blok podlegający wyrównaniu w pionie. Może być dowolnego rozmiaru.
        </div>
    </div>
</div>

</body>
</html>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

3 komentarzy do “Centrowanie w pionie za pomocą CSS