Een tabel verticaal centreren
Heel vaak kom je de vraag tegen op het internet : ‘Hoe kan ik een tabel verticaal centreren?’ Wel in normale wijze, werkende in Dreamweaver, kan je enkel een tekst of foto in een tabel verticaal centreren. Daar heb je de valign functie voor in Dreamweaver. Een tabel verticaal centreren gaat niet in Dreamweaver.
Voor alles bestaat er wel een oplossing en ook hiervoor. We gaan wat CSS toevoegen aan de code van de pagina om tot het volgende effect te komen : Een verticaal gecentreerde tabel.
Het enige dat je moet doen is volgende code toevoegen in de head van je pagina :
<style type="text/css">
<!--
table {
position: absolute;
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -150px;
}
-->
</style>
Let wel : Bovenstaande regel geldt voor een tabel van 200px op 200px. Hoe pas je dit aan indien je tabel een andere afmeting heeft :
- Je neemt de helft van de hoogte van je tabel en vult deze in achter margin-top en vul deze in als een min waarde.
- Je neemt de helft van de breedte van je tabel en vult deze in achter margin-left en vul deze in als een min waarde.
Voorbeeld van een tabel van 400px hoog en 300px breed zou zijn :
<style type="text/css">
<!--
table {
position: absolute;
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -150px;
}
-->
</style>
Meer is het niet om je tabel verticaal te centreren…
Nog vragen? Bezoek het forum...
:
Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.
Comments
Nog geen reacties.
Plaats een reactie