<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>Comment faire pour que l'image commence au milieu de cette boîte (milieu vertical et horizontal) ?
Réponses
Trop de publicités?
Il y a plusieurs façons de procéder, et s'il faut que cela fonctionne dans tous les navigateurs (IE7+ et les autres), vous devez faire différentes choses pour que cela fonctionne dans certains cas.
-
Utiliser la position absolue. Cela ne fonctionne que si vous connaissez la taille de l'image. Ici, vous le réglez sur
position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.Voir l'exemple ici : http://jsfiddle.net/JPch8/
-
Utilice
margin: 0 auto;text-align: center;yline-height/font-size. C'est un peu plus délicat, car la hauteur de ligne ne fonctionne pas comme elle le devrait dans IE pour les éléments inline-block comme les images. C'est là que la taille de la police entre en jeu. En gros, vous définissez la hauteur de ligne du conteneur de l'image comme étant la même que la hauteur du conteneur. Cela permet d'aligner verticalement les éléments en ligne, mais dans IE, vous devez définir la taille de la police pour que cela fonctionne.Voir l'exemple ici : http://jsfiddle.net/JPch8/2/
-
Dans les navigateurs modernes qui prennent en charge
display: flexvous pouvez le faire en fixant simplement le div du conteneur àdisplay: flex; align-items: center; justify-content: center;Voir l'exemple ici : https://jsfiddle.net/ptz9k3th/
Kagan Agun
Points
199
Mettre l'image dans un <div> con text-align:center; sans spécifier la taille de la boîte
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>Alternativement, vous pouvez spécifier width et le height de la <div> afin de centrer l'image (en fait le cadre div).
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
Cfreak
Points
10831
" float:left; position:relative "ne fonctionne probablement pas comme prévu. Les éléments flottants sont considérés comme absolus.
Pour centrer l'image verticalement, vous avez besoin d'une hauteur sur le div, et vous avez besoin d'une hauteur sur ses parents. (Le centrage vertical est un peu difficile). Mon exemple ci-dessous fonctionnera si ce sont vos seuls éléments, mais sachez que height: 100% sur les conteneurs affectera probablement le reste de votre mise en page.
<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
WDuffy
Points
2912
Une solution adaptée aux navigateurs modernes est le flexbox. Un conteneur flexbox peut être configuré pour aligner ses éléments à la fois horizontalement et verticalement.
<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
<img src="bla.jpg">
</div>
Mindfield Studio
Points
1
- Réponses précédentes
- Plus de réponses
