Positionner un bloc par rapport a son centre [Résolu/Fermé]

Signaler
Messages postés
24
Date d'inscription
lundi 19 janvier 2009
Statut
Membre
Dernière intervention
8 avril 2010
-
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
-
Bonjour,
Est-ce qu'il est possible en xhtml et CSS de positionner un bloc par rapport à son centre ?
Je m'explique, j'aimerais que la position du bloc par rapport à un côté soit déterminée en fonction du centre du bloc et non pas du coin supérieur gauche.

Merci beaucoup

6 réponses

Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
458
Tu peux ruser pour parvenir a ce résultat.
Exemple:
Côté html:
<div id="bloc">
     <p>Essai</p>
</div>

Côté CSS:
div#bloc{
     width:900px;
     position:relative;
     left:50%;
     margin-left:-450px;
     }


Voici une solution pour centrer un bloc.
margin: 0px auto; n'est pas pris en compte par IE6. Il est donc possible avec ma méthode de centrer un bloc même avec IE6.
Tu peux te servir de cet exemple.
Autrement, il n'est pas possible de positionner un élément de la manière que tu le souhaiterai. Il faut ruser pour y parvenir.

Messages postés
24
Date d'inscription
lundi 19 janvier 2009
Statut
Membre
Dernière intervention
8 avril 2010

Merci mais ce n'est pas vraiment cela que je veux faire. Je veux par exemple positionner un bloc à 20% du bord gauche et à 40% du bord supérieur.

Mais si je mets cela :

.explanations
{
position: absolute;
left: 20%;
top: 40%;
}


C'est le coin supérieur gauche qui est à 20% du bord gauche et à 40% du haut.

Or, je voudrais que le centre de ce bloc se trouve à 20% du bord gauche et à 40% du haut...

Existe-t-il une solution ?

Merci
Messages postés
24
Date d'inscription
lundi 19 janvier 2009
Statut
Membre
Dernière intervention
8 avril 2010

Up !
Messages postés
24
Date d'inscription
lundi 19 janvier 2009
Statut
Membre
Dernière intervention
8 avril 2010

up !
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
458
Comme je l'ai fait dans mon précédent exemple, il faut compenser avec margin.

.explanations
     {
     position: absolute;
     left: 20%;
     margin-left:- # px;
     top: 40%;
     margin-top: - # px;
     }


# correspondra respectivement à la moitié de la largeur et la moitié de la hauteur du bloc que tu places. Je vois pas trop de manière de faire autrement.
Messages postés
24
Date d'inscription
lundi 19 janvier 2009
Statut
Membre
Dernière intervention
8 avril 2010

Un tout grand merci ! Ca fonctionne !
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
458
Comme je disais, il faut savoir ruser.
Un peu de réflexion et le tour est joué.
Mais bon... pas toujours évident.
Bonne continuation.