Positionner l'image en utilisant css

Question

J'ai vraiment besoin de placer une image quelque part dans la page (100 pixels du côté gauche par exemple) mais je veux contrôler où sera le centre de l'image, quand j'utilise left: 100px; , l'image est positionnée 100px à partir de son bord gauche et non de son centre ...

Y at-il une façon que je puisse choisir où le centre de l'image sera et non le bord gauche/droite?

Answer 1

Aucun objet n'est toujours placé dans le coin supérieur gauche. Si vous connaissez la largeur de l'image, cela devrait être facile à expliquer.

Si votre taille d'image est dynamique, il est préférable de faire ce type de positionnement en utilisant Javascript.

Answer 2

[Je présume que la largeur de l'image ne sait pas à l'avance, sinon la solution serait évidente]

Je suppose que votre meilleure option est de le mettre dans un élément à largeur fixe et le centre à l'intérieur que. Bien sûr, cela présente des inconvénients évidents si la largeur de l'image est illimitée et peut dépasser la largeur de l'élément du conteneur.

Answer 3

Connaissez-vous la largeur de l'image ou cela varie-t-il?

Si vous connaissez la largeur, vous pouvez définir la position, puis désactiver la marge. Par exemple, si vous vouliez centrer au milieu de la page que vous pouvez utiliser ceci:

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
} 

si votre image a été 100x50px.

Answer 4

Voici une approche. Vous enveloppez l'image dans un div, puis positionnez la div où vous le souhaitez, faites-la glisser vers la gauche pour qu'elle s'effondre pour s'adapter à son contenu. Puis margin-left: -50% l'image elle-même ...

<div style="position: relative; left: 300px; border: 1px solid red; float: left"> 
     <img src="#" style="position: relative; margin-left: -50%"/> 
    </div> 

Demo