Sposób na wyśrodkowanie tekstu w pionie
- Data publikacji
- Ostatnio edytowano
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.