Bonjour, je rencontre des difficultés pour l'alignement de deux images, dont ici des images de flèches permettant de naviguer sur plusieurs pages html.

Voici mon code css: (Merci si vous répondez  !)

.flechegauchealeatoire{ 
	width: 100px;
	height: 100px;

position: absolute;
left: 3px;
bottom: 0px;	
	
}


.flechedroitealeatoire{ 
	width: 100px;
	height: 100px;
	transform: rotate(180deg);

	position: absolute;
    left: 1130px;
	bottom: 0px;
}

.lesfleches{  /*Caractéristiques communes des flèches*/
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	background-color: red;
   }

Voici l’apparence:

-
Edité par L.O.D.A 13 juin 2019 à 13:53:13

Salut,

normalement le point de rotation se fait au milieu mais sait-on jamais.

Rajoute un transform-origin: 50% 50%

En passant, plutôt que mettre left:1130px mets plutôt right:3px.
Tu auras moins de surprise si tu veux faire du responsive.

Si .lesfleches est une classe commune à tes flèches quel est l'utilité de te servir de flex ?

Tu peux nous donner le code html ?

Salut

L'idéal serait de mettre aussi ton code html.

Sans parler code, ce ne serait pas ta flèche qui ne serait pas centré dans ton image et ainsi lors du rotate ce décalage serait visible vu que l'image est inversé?

Je sais pas si je suis clair lol, en gros, essai d'enlever le rotate pour voir si dans ce cas l'alignement est ok

++

palmito_ a écrit:

Salut

L'idéal serait de mettre aussi ton code html.

Sans parler code, ce ne serait pas ta flèche qui ne serait pas centré dans ton image et ainsi lors du rotate ce décalage serait visible vu que l'image est inversé?

Je sais pas si je suis clair lol, en gros, essai d'enlever le rotate pour voir si dans ce cas l'alignement est ok

++

Je pense aussi qu'il y a de ça. Il suffit qu'il y est un petit espace en haut de l'image, et donc invisible dans le bon sens mais évidement au rotate cet espace se retrouve en bas.

Bonjour et merci pour vos réponses !

Voici la partie intéressante du code html:

<div class="lesfleches">
 <p class="flechegauchealeatoire"> <a href="?"><img class="flechegauchealeatoire" src="https://cdn.pixabay.com/photo/2013/07/12/14/06/arrows-147754__340.png"> </a> </p> 

<p class="flechedroiteleatoire"> <a href="?"><img class="flechedroitealeatoire" src="https://cdn.pixabay.com/photo/2013/07/12/14/06/arrows-147754__340.png"> </a> </p> 
</div>

Heureusement que tu as fait une erreur dans le nom de la classe du <p> parce que sinon Tu mettais les même styles  au <p> et à la l'image...

En gros ça faisait deux rotations pour revenir au point d'origine.

Et donc .lesfleches est le container de tes images.
Pourquoi utiliser flex ? Inutile puisque tes images ont positionnées.

Teste ce code :

    <div class="lesfleches">
        <a class="flechegauchealeatoire" href="?">
            <img src="https://cdn.pixabay.com/photo/2013/07/12/14/06/arrows-147754__340.png"> 
        </a>
        <a class="flechedroitealeatoire" href="?">
            <img src="https://cdn.pixabay.com/photo/2013/07/12/14/06/arrows-147754__340.png"> 
        </a>
    </div>

.lesfleches {
    position:relative;
    height:100px;
    background:blue
}
.flechegauchealeatoire{
    display:block;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 3px;
    bottom: 0;    
}
.flechedroitealeatoire{
    display:block;
    width: 100px;
    height: 100px;
    position: absolute;
    right: 3px;
    bottom: 0;
}
.flechedroitealeatoire img {
    transform:rotate(180deg)
}
.lesfleches img {
    width:100%
}

Bonjour!

Désolé de répondre que maintenant. En tout cas votre code m'a bien aidé ! 

J'ai juste ajouté à "lesfleches" la position "bottom: -280px;" pour mettre l'ensemble en bas de page.

Merci pour votre aide et bonne journée !