SHOW:
|
|
- or go back to the newest paste.
| 1 | <html> | |
| 2 | <head> | |
| 3 | <title>Centrage vertical</title> | |
| 4 | - | |
| 4 | + | <style> |
| 5 | - | <style type="text/css"> |
| 5 | + | height:500px; |
| 6 | - | div.conteneur {
|
| 6 | + | width:700px; |
| 7 | - | height:200px; |
| 7 | + | position: relative; |
| 8 | - | line-height:200px; |
| 8 | + | } |
| 9 | - | text-align:center; /* centrage horizontal */ |
| 9 | + | #temp {
|
| 10 | - | } |
| 10 | + | position:absolute; |
| 11 | - | |
| 11 | + | height:1px; |
| 12 | - | div.bloc {
|
| 12 | + | overflow: visible; |
| 13 | - | width:100px; |
| 13 | + | top:50% |
| 14 | - | border:1px solid #fff; |
| 14 | + | } |
| 15 | - | vertical-align:middle; |
| 15 | + | #content {
|
| 16 | - | display:inline-block; |
| 16 | + | position:absolute; |
| 17 | - | line-height:1.2; /* on rétablit le line-height */ |
| 17 | + | height:200px; |
| 18 | - | text-align:left; /* ... et l'alignement du texte */ |
| 18 | + | width:200px; |
| 19 | - | } |
| 19 | + | top:-100px; |
| 20 | - | </style> |
| 20 | + | } |
| 21 | - | <!--[if IE 7]> |
| 21 | + | </style> |
| 22 | - | <style type="text/css"> |
| 22 | + | |
| 23 | - | div.bloc {
|
| 23 | + | |
| 24 | - | display:inline; /* correctif inline-block */ |
| 24 | + | <div id="container"> |
| 25 | - | } |
| 25 | + | <div id="temp"> |
| 26 | - | |
| 26 | + | <div id="content"> |
| 27 | - | div.conteneur > span {
|
| 27 | + | Contenu du div à centrer |
| 28 | - | zoom:1; /* layout */ |
| 28 | + | </div> |
| 29 | - | } |
| 29 | + | </div> |
| 30 | - | <![endif]--> |
| 30 | + | </div> |
| 31 | </body> | |
| 32 | </html> |
