bonjour,
je ttrouve un problème à center verticalement et horizontalement une image contenue dans une page html avec css
bonjour,
je ttrouve un problème à center verticalement et horizontalement une image contenue dans une page html avec css
Salut!
Alors pour centrer horizontalement une div. tu fais:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 #element { margin-left: auto; margin-top: auto; }
Et puis pour un centrage verticale, tu as deux possibilité: La première en css, qui se fait avec un :
Mais tu risque fortement que cela ne te convienne pas. Dans ce cas, tu as une autre possibilité, c'est de passer par du javascript comme je le fais actuellement ici :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 #element { vertical-align:middle; }
http://www.developpez.net/forums/d11...juster-taille/
Cordialement,
Ctesias
bonjour,
merci pour la réponse,
au fait, vortre code marche mais pas pour center des élément par raport à la page html,
voici un exemple de code avec css et pour éviter javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans nom</title> <style> html { height: 100%; } body { height: 100%; margin: 0; } .c1{ vertical-align:middle; text-align:center; height:100%; width:100%; border:1px solid #FF0000; } </style> </head> <body> <table class="c1"><tr><td>test centrer du texte </td></tr> </div> </body> </html>
Euh si mon code marche pour centrer les éléments sur une page html ^^'. Mais dans ce que je recherche, le css n'est pas une idée valable![]()
bonjour,
c'est une erreur de sasie la table est fermé avec la balise </table>
j'ai essayé display:table-cell
ça fonctionne pas
merci pour vos réponses
tu peux également utiliser la technique dite des marges négatives
exemple :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 <!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[CSS Centrage vertical]</title> <style type="text/css"> html, body{ width:100%; height:100%; margin:0; padding:0; } #element{ position : relative; border:1px solid blue; /* centrage horizontal */ width:400px; margin-left:auto; margin-right:auto; /* centrage vertical */ height:300px; top:50%; margin-top:-150px; /* moitié de la hauteur */ } </style> </head> <body> <div id="element"></div> </body> </html>
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager