28111 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical

j'achoppe sur l'alignement vertical. Voici mon code:
CSS:

.Row01		{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-center; }
#R0101		{ margin-right: 8px; letter-spacing: -1px; }
#R0101		{ font-family: "HoboStd_Medium"; font-size: 1.3rem; color: #4472c4; }
#R0102		{ margin-right: 4px; letter-spacing: -1px; }
#R0102		{ font-family: "ComicSansMS_Medium"; font-size: 0.7rem; color: #000000; }
#R0103		{ }
#R01Symbole	{ border: 0; width: 24px; height: 24px; }

HTML:

<div class="Row01">	<!--  Conteneur  -->
	<span id="R0102">Mon Titre Principal</span>
	<span id="R0103">Mon Titre Annexe</span>
	<span id="R0104"><a href="THeme.php?THeme=English" target="_self">
		<img id="R01Symbole" src="Anglais.jpg" alt=""></img> </a></span>
</div>

Mon image jointe:
upload/1523522348-69079-anglais.jpg
D'avance, merci
Modérateur
Pas de bol !

Et si vous ajoutez ceci
#R0104 > a { display: flex; }

Ça devrait éliminer l'effet de bord car en l'état actuel, si vous appliquez une couleur de fond au lien (balise 'a') vous vous apercevrez que celui-ci est plus grand que l'image (balise 'img'). Ce qui a pour effet de fausser le point de référence au centrage vertical.

Avec cet ajout le lien s'ajuste réellement à la taille de son contenu ce qui fait que le point de référence pour le centrage (qui est toujours la span qui englobe vu qu'elle est enfant directe de la div) peut-être assimilé à celui du lien qui lui même est assimilé à l'image. La span, le lien et l'image faisant la même hauteur, l'image devient donc référente indirecte pour l'alignement vertical. CQFD ! Smiley cligne
Modifié par Greg_Lumiere (12 Apr 2018 - 13:32)
Rectification sur la CSS:

.Row01		{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #FFD700; }

#R0101		{ margin-right: 8px; letter-spacing: 2px; }
#R0101		{ font-family: "HoboStd_Medium"; font-size: 2rem; color: #4472c4; }

#R0102		{ margin-right: 4px; letter-spacing: -0px; }
#R0102		{ font-family: "ComicSansMS_Medium"; font-size: 0.7rem; color: #000000; }

#R0103		{ }
#R01Symbole	{ border: 0; width: 24px; height: 24px; }

J'ai rajouté le background-color.
P.S.: je suis sur IE11
Modérateur
BLacknWHite a écrit :

J'ai rajouté le background-color.
Magnifique !!!!

Et maintenant si vous lisiez sérieusement ma réponse ?
Administrateur
BLacknWHite a écrit :
P.S.: je suis sur IE11

Hello,

Voilà qui change radicalement la donne :
1- Sur IE11, le support est partiel : https://caniuse.com/#feat=flexbox
2- Sur IE11, il y a beaucoup de bugs : https://github.com/philipwalton/flexbugs
3- Sur IE11, il te faut ajouter les préfixes -ms- avant tes propriétés
4- Sur IE11 et IE10, le nom des propriétés est parfois différent (!), il faut les connaître : http://zomigi.com/blog/flexbox-syntax-for-ie-10/ (sans un outil comme Autoprefixer, bon courage !)
5- euh... bon courage !
Quand on développe un site internet, il n'est pas inutile de s'intéresser aux navigateurs les plus populaires parmi ses visiteurs.
http://www.zdnet.fr/actualites/chiffres-cles-les-navigateurs-internet-39381322.htm

De plus, il me semble que l'OS , vendu obligatoirement avec tout PC, préconise l'emploi de Edge
à la place de IE.

Mais bon, faut s'étonner de rien. La majorité des gens développent avec cet OS sans se préoccuper de savoir avec quel OS tournent les serveurs sur Internet.
Raphael a écrit :

Voilà qui change radicalement la donne :
....
3- Sur IE11, il te faut ajouter les préfixes -ms- avant tes propriétés

Pour moi IE11 n'a pas les versions prefix -ms- c'est IE10 ?
Administrateur
aliasdmc a écrit :

Pour moi IE11 n'a pas les versions prefix -ms- c'est IE10 ?

Tu as raison, voilà un point résolu Smiley langue
Sujet clos
Aller à