Hoe ken je doormiddels met een <div> De inhoud horizontaal en verticaal centreren?
Dus dat alles precies op het midden van de site staat
GR. mebus!
edit: Want met table's lukt het opeens niet meer:S:S
307 views
#mijndiv {
text-align: center;
vertical-align: middle;
}
text-align: center;
vertical-align: middle;
}
Dat werkt niet:(
http://84.105.39.21/
Hier een stukje van de broncode
<?php
<div id="divindex">
<form method="post" action="inloggen.php">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Naam:
</td>
<td>
<input class="invulveld" name="naam" type="text" maxlength="16" />
</td>
</tr>
<tr>
<td>
Wachtwoord:
</td>
<td>
<input class="invulveld" name="wachtwoord" type="password" maxlength="40" />
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input class="submit" type="submit" name="submit" value="Login" />
</td>
</tr>
</table>
</form>
</div>
?>
css:
<?php
body
{
font-family: Tahoma;
font-size: 10px;
color: #000000;
background-color: #990000;
margin: 0px;
padding: 0px
}
input.invulveld
{
background-color: #659ae9;
font-family: Tahoma;
font-size: 10px;
}
input.submit
{
background-color: #659ae9;
font-family: Tahoma;
font-size: 12px;
}
#divindex
{
text-align: center;
vertical-align: middle;
}
?>
vertical-align: middle;
centreert toch alleen maar tekst en geen table's toch?
GR. mebus!
http://84.105.39.21/
Hier een stukje van de broncode
<?php
<div id="divindex">
<form method="post" action="inloggen.php">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Naam:
</td>
<td>
<input class="invulveld" name="naam" type="text" maxlength="16" />
</td>
</tr>
<tr>
<td>
Wachtwoord:
</td>
<td>
<input class="invulveld" name="wachtwoord" type="password" maxlength="40" />
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input class="submit" type="submit" name="submit" value="Login" />
</td>
</tr>
</table>
</form>
</div>
?>
css:
<?php
body
{
font-family: Tahoma;
font-size: 10px;
color: #000000;
background-color: #990000;
margin: 0px;
padding: 0px
}
input.invulveld
{
background-color: #659ae9;
font-family: Tahoma;
font-size: 10px;
}
input.submit
{
background-color: #659ae9;
font-family: Tahoma;
font-size: 12px;
}
#divindex
{
text-align: center;
vertical-align: middle;
}
?>
vertical-align: middle;
centreert toch alleen maar tekst en geen table's toch?
GR. mebus!
Verticaal centreren is altijd een probleem in CSS. Horizontaal lukt wel met text-align. Er is wel een truc voor maar daarvoor moet ik even zoeken. Momentje :-)
klopt, vandaar dat je even dit moet toevoegen
Succes!
<?css
#divindex {
margin-left:auto;
margin-right:auto;
}
?>
Succes!
Raar ik zat te kijken waarom height="100%" niet werkte en wanneer ik dit weggehaalde:
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en">
?>
Dan werkte height="100%" wel:S:S
GR. mebus!
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en">
?>
Dan werkte height="100%" wel:S:S
GR. mebus!
Ja, je kunt met DOCTYPES aan de gang gaan, maar dan is maar de vraag of het crossbrowser is.
De oplossing met CSS kan zo:
Centreren met CSS
Getest en werkt in IE, FF en Opera. Safari vraag ik bij deze even aan de Mac users :-)
De oplossing met CSS kan zo:
Centreren met CSS
Getest en werkt in IE, FF en Opera. Safari vraag ik bij deze even aan de Mac users :-)
Oké zal ff aanpassen!
Dankje wel alvast!:D
GR. mebus!
Dankje wel alvast!:D
GR. mebus!
Graag gedaan mebus. Wij kunnen hier niet controleren of het bij jou werkt omdat je verwijzing naar je stylesheet er zo in staat:
Als je localhost vervangt door je ip-adres, dan wel.
<link rel="stylesheet" type="text/css" href="http://localhost/css/style.css" />
Als je localhost vervangt door je ip-adres, dan wel.