Centrer de manière verticale un élément de type bloc - tableau - HTML5 et CSS3
Bonjour,
Comme c'est écrit dans le titre de la discussion, je voudrais centrer de manière relative un élément de type bloc, tableau.. D'après mon livre, le tableau obéit aux règles de type "bloc" pour l'extérieur du tableau et les balises interne sont de type "en ligne" (ex:
Code:
text-align: center;
).
Donc pour l'instant, je me débrouille avec
Code:
margin-top: valeur;
, mais je dois chipoter pour avoir un centrage "parfais".
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
<head>
<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
<title>test élément de type bloc centré</title>
<link rel="stylesheet" type="text/css" href="testcentrageverticale.css" />
</head>
<body>
<div id="elementcentre">
Box Content
</div>
</body>
</html> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#elementcentre {
text-align: center;
margin: auto;
margin-top: 30%;
width: 30%;
padding: 20px;
background: #eeeeee;
border: 5px solid #2c55b7;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
} |
Avez-vous une meilleure solution concernant le centrage verticale svp ?
Et au passage, j'en profite pour vous demander de me rappeler comment préciser le code (syntaxe), quand j'écris ici, je crois que c'est un truc du genre code:html, code:css, pour la coloration syntaxique..
Merci.
Centrer le premier élément enfant de body
La réponse est intéressante, mais je cherche finalement à centrer le premier élément enfant (div) de body :
Code:
1
2
3
4
5
6
|
<body>
<div id="elementcentre">
Par exemple, pour la page index.htm d'un site, page d'accueil, qui aurait être un logo ou simple texte.
</div>
</body> |
Je suis proche du résultat, voici où j'en suis :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
<head>
<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
<title>test élément de type bloc centré</title>
<link rel="stylesheet" type="text/css" href="test2centrageverticale.css" />
</head>
<body>
<div id="elementcentre"><!-- correctement centré verticalement -->
<span id="enfant">Box Content</span><!-- problème pour centrer le texte verticalement -->
</div>
</body>
</html> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#elementcentre {
position: absolute;
top: 50%; /* top = 50% pour centrage vertical */
left: 50%; /* left = 50% pour centrage horizontal */
width : 100px;
height : 100px;
margin-top: -50px; /* margin-top = - height/2 */
margin-left: -50px; /* margin-left = - width/2 */
border : 1px solid green;
text-align: center;
} |
Pour l'instant, je ne trouve pas.
Au fait, pour la coloration syntaxique, il faut préciser : code=xxx.
