Liela daļa izstrādātāju, kas tikko sākuši eksperimentēt ar CSS bāzētiem
izkārtojumiem, vienā brīdī atduras pret problēmu, kas saucas “vertikālā centrēšana”.
Problēma tā ir tāpēc, ka CSS nepiedāvā ērtus veidus kā to darīt. Faktiski CSS
pat nepiedāvā nekādus veidus kā to izdarīt. Praktiski visi Internetā
atrodamie risinājumi un koncepti ir sava veida CSS haki. Un neviens no tiem
nav ideāls. Pat ne tuvu ideālam.

Es iesaku mest pie malas CSS centrēšanu, un vienkārši izmantot vienas šūnas
tabulu, lai panāktu to.

<div style="border: 1px solid black; height: 200px;">
 <table style="vertical-align: middle; height: 100%; padding: 0; border: 0;”>
 	<tr>
 		<td>
 			Centrējamie elementi
 		</td>
 	</tr>
 </table>
</div>

Šis kods praktiski visos browseros (arī vecos) renderēsies vienādi un
vajadzīgais teksts (vai elementi) centrēsies.

Centrējamais teksts vai elementi

Reāli iepriekš dotajā koda piemērā tabula pat netiek izmantota priekš
izkārtojuma. Tā vairāk ir kā palīgelements, kas ievietots dokumentā priekš
CSS formatēšanas. Tā arī neizjauc dokumenta secību. Manuprāt, ja tabula tiek
izmantota šādi, tad tās izmantojums no semantiskuma viedokļa ir tik pat
attaisnojams kā papildus <div> (vai citu) elementu izmantošana CSS
vajadzībām.

Arī W3C WCAG saka:

Do not use tables for layout unless the table makes sense when linearized.

Es savā piemērā izmantoju inline stilus, bet reāli šos stilus vajadzētu
pārnest ārējā CSS failā. Ja tā izdara, tad kods pat būs daudz maz “tīrāks” nekā
dažām labām CSS vertikālās centrēšanas metodēm.

Resursi: