Centrer une image dans un div trop petit pour cela?
Donc, j'ai un div dans mon corps qui est un pourcentage de la largeur, et à l'intérieur d'un div avec style en ligne comme suit:
text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;
Comme vous pouvez le voir, j'ai text-align: center;
qui serait, si l'image était assez petit pour le div
centre de l'image. Mais le pourcentage de la largeur de div
est certainement ne va pas être assez gros sur mon écran 1280x800.
Les marges négatives sont à surmonter certains de rembourrage sur celle du parent div
. Le overflow:hidden
fait voir les choses comme je veux, pas salissant. Donc, c'est une sorte de travail comme je le veux, comme l'image d'en-tête à onenaught.com. Il deviendra de plus en plus visible sur le droit que vous de rendre le navigateur plus large, mais ne pas s'étendre des deux côtés, car il n'est pas centré.
Alors, je me demande si il y a moyen de centre de l'image. Savoir de tout?
Edit: page ici.
source d'informationauteur Nathaniel
Vous devez vous connecter pour publier un commentaire.
Une option serait absolument position de l'image avec
left: 50%
et ensuite utiliser une marge négative à gauche de l'image est égale à la moitié de la largeur de l'image. Bien sûr, cela nécessite le contenantdiv
avoir son positionnement relatives ou absolues dans le but de fournir le bon type de conteneur pour l'image, pour être absolument positionné à l'intérieur.L'autre option (et probablement mieux) au lieu d'utiliser une balise d'image, il suffit de définir l'image comme fond pour la div parent, et l'utilisation de la arrière-plan de positionnement des attributs CSS au centre. Non seulement cela assurez-vous qu'il est centré sans forcer le positionnement absolu, mais il a également automatiquement les cultures de débordement, de sorte que le dépassement de l'attribut n'est pas nécessaire.
À l'aide de css
transform
pour une image à l'intérieur d'un conteneur avecoverflow: hidden
et un ensemble de largeur:jsFiddle ici (J'ai emprunté une partie de Mathijs Flietstra de jsFiddle, donc merci).
envisager l'utilisation de l'image comme arrière-plan 😉
utiliser background-position pour obtenir ce que vous voulez.
vous pouvez avoir besoin d'une solution d'activer javascript pour obtenir la cohérence de la croix-navigateur résultats
J'ai trouvé une autre solution
et dans le corps
Ce centre de votre image à chaque fois que votre conteneur est plus grand ou plus petit. Dans ce cas, votre image doit être plus grand que 300% de conteneur pour ne pas être centré, mais dans ce cas vous pouvez faire avec de containerSecond plus grand, et il va travailler