Sposób na wyśrodkowanie tekstu w pionie

W tej części kursu CSS dowiemy się w jaki sposób wyśrodkować tekst względem pionu elementu HTML. Będzie tu mowa o jakimś przykładowym elemencie HTML, dla którego została ustalona stała wartość wysokości, czyli właściwości height.

Taki element HTML został zaprezentowany pod spodem:

to jest przykładowy tekst, który został umieszczony w elemencie - p

Jeżeli chodzi o wyrównanie tekstu w poziomie, w blokowym elemencie HTML, to nie mamy z tym większego problemu, ponieważ wspomniany efekt możemy uzyskać za pomocą właściwości text-align:center;

Natomiast jeżeli chodzi o wyrównanie tekstu w pionie, w blokowym elemencie HTML (dla którego została ustalona jakaś stała wartość wysokości), to sprawa wygląda nieco inaczej.

Przeglądając różne właściwości, jakie oferuje nam język CSS, możemy natknąć się na właściwość vertical-align, dzięki której możemy wyrównać w pionie, na różne sposoby, tekst w komórce tabeli HTML. Jednak my chcemy wyśrodkować nasz tekst w pionie elementu p, a nie w komórce tabeli HTML, czyli w elemencie td.

Co w takim wypadku?

W takim wypadku musimy sprawić, aby nasz element p został zinterpretowany przez przeglądarkę internetową jako komórka tabeli, co uzyskamy za pomocą właściwości display:table-cell;

Od tej pory nasz element p będzie interpretowany przez przeglądarkę internetową jako komórka tabeli, dzięki czemu będziemy mogli dodać do niego właściwość vertical-align wraz z wartością middle, gdy to uczynimy, to uzyskamy w ten sposób wyśrodkowanie tekstu w pionie elementu HTML, dla którego została ustalona jakaś stała wartość wysokości, czyli właściwość height.

Przykład:

to jest przykładowy tekst, który został umieszczony w elemencie - p

Gdy dodamy do naszego elementu p więcej tekstu, to ten tekst nadal pozostanie wyśrodkowany w pionie danego elementu HTML.

to jest przykładowy tekst, który został umieszczony w elemencie - p to jest przykładowy tekst, który został umieszczony w elemencie - p to jest przykładowy tekst, który został umieszczony w elemencie - p

Kod całego dokumentu HTML został umieszczony pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p {
        border:3px solid #FDD700;
        background-color:#EEE;
        width:400px;
        height:200px;
        padding:15px;
        display:table-cell;
        vertical-align:middle;
      }
    </style>
  </head>

  <body>

      <p>
        to jest przykładowy tekst, który został umieszczony w elemencie - p
        to jest przykładowy tekst, który został umieszczony w elemencie - p
        to jest przykładowy tekst, który został umieszczony w elemencie - p
      </p>

  </body>
</html>

Starsze wersje przeglądarki Internet Explorer nie interpretują wartości table-cell, jednak w dzisiejszych czasach można już zapomnieć o tego typu archaicznych wersjach przeglądarki IE.

W następnej części kursu CSS dowiemy się jak utworzyć element HTML z pionowym tekstem.