Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP alignement vertical d'une image

alignement vertical d'une image

17 réponses
Avatar
Une Bévue
Bonjour,

j'ai une image dans un header / h1 :
<header>
<h1><img ... /><span>...</span></h1>
</header>

l'image fait 48px de haur ainsi que header et h1 :
header
grid-column: 1
grid-row: 1
color: $head_color
background-color: $head_foot_color
height: 48px
display: grid
grid-template-columns: 50% 50%
grid-template-rows: 100%
h1
grid-column: 1
grid-row: 1
height: 48px
line-height: 48px
img
margin: 0 16px 0 8px
vertical-align: middle
span
font-size: 32px
height: 48px
line-height: 48px

le span qui suit l'image est bien centré verticalement, mais l'image
déborde de quelques pixels **sous** le header / h1, comment remédier à
ça (c'est moche) ?
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Une Bévue
Le 14/12/2016 à 13:13, Une Bévue a écrit :
le span qui suit l'image est bien centré verticalement, mais l'image
déborde de quelques pixels **sous** le header / h1, comment remédier à
ça (c'est moche) ?

je précise que j'ai lu (peut-être mal ?) :
<http://www.alsacreations.com/xmedia/tuto/exemples/vertical/demos.html>
<http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html>
j'ai même ajouté dans h1 :
display: table-cell
mais rien n'y fait O[
Avatar
SAM
Le 14/12/16 à 13:17, Une Bévue a écrit :
Le 14/12/2016 à 13:13, Une Bévue a écrit :
le span qui suit l'image est bien centré verticalement, mais l'image
déborde de quelques pixels **sous** le header / h1, comment remédier à
ça (c'est moche) ?

je précise que j'ai lu (peut-être mal ?) :
<http://www.alsacreations.com/xmedia/tuto/exemples/vertical/demos.html>
<http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html>
j'ai même ajouté dans h1 :
display: table-cell
mais rien n'y fait O[

Je ne connais pas ce "grid"
mais ... ne comprends pas non plus le propos ...
centrer verticalement une image dans un conteneur de même hauteur :
qu'il y a t-il à centrer ???
Me semble que perso, le span je l'aurais laissé se débrouiller
span
font-size
et c'est tout,
(on n'a pas besoin du span, ceci dit en passant)
l'image réglant son voisin en son propre milieu verticalement.
(théoriquement) (et peut-être nonobstant la base-line du texte ?)
img
margin: 0 16px 0 8px
vertical-align: middle
Normalement et à mon idée que je partage avec moi-même, le table-cell
devrait, *sans autre artifice* (grid ? vertical-align, margin, etc.);
régler la question de l'alignement vertical qui en est son mode par défaut.
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Olivier Miakinen
Le 14/12/2016 13:13, Une Bévue a écrit :
j'ai une image dans un header / h1 :
<header>
<h1><img ... /><span>...</span></h1>
</header>
[...]
img
margin: 0 16px 0 8px
vertical-align: middle
[...]
le span qui suit l'image est bien centré verticalement, mais l'image
déborde de quelques pixels **sous** le header / h1, comment remédier à
ça (c'est moche) ?

As-tu essayé d'autres valeurs de vertical-align, telles que bottom ou
text-bottom ?
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
--
Olivier Miakinen
Avatar
Olivier Miakinen
Le 14/12/2016 13:52, SAM a écrit :
Normalement et à mon idée que je partage avec moi-même, le table-cell
devrait, *sans autre artifice* (grid ? vertical-align, margin, etc.);
régler la question de l'alignement vertical qui en est son mode par défaut.

Ce serait le plus simple en effet.
--
Olivier Miakinen
Avatar
SAM
Le 14/12/16 à 13:13, Une Bévue a écrit :
Bonjour,
j'ai une image dans un header / h1 :
<header>
<h1><img ... /><span>...</span></h1>
</header>
l'image fait 48px de haur ainsi que header et h1 :
header
grid-column: 1
grid-row: 1
color: $head_color
background-color: $head_foot_color
height: 48px
display: grid
grid-template-columns: 50% 50%
grid-template-rows: 100%
h1
grid-column: 1
grid-row: 1
height: 48px
line-height: 48px

/* essayer ici */
align-self: center;
img
margin: 0 16px 0 8px

/* et peut-être ce passer de cette règle-ci ? */
/*
vertical-align: middle

*/
span
font-size: 32px
height: 48px
line-height: 48px
le span qui suit l'image est bien centré verticalement, mais l'image
déborde de quelques pixels **sous** le header / h1, comment remédier à
ça (c'est moche) ?

Ha!
vaguement testées ces 2 propositions (avec moins de tarabustages
accessoires il est vrai) et çà me parait OK
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 14/12/2016 à 13:52, SAM a écrit :
Normalement et à mon idée que je partage avec moi-même, le table-cell
devrait, *sans autre artifice* (grid ? vertical-align, margin, etc.);
régler la question de l'alignement vertical qui en est son mode par défaut.

sauf que comme je le disais, ça marche pô
Avatar
Une Bévue
Le 14/12/2016 à 14:11, SAM a écrit :
Ha!
vaguement testées ces 2 propositions (avec moins de tarabustages
accessoires il est vrai) et çà me parait OK

bon, align-self: center pour h1 c'est OK pour l'image, ça la centre,
mais du coup c'est le span qui descend, un peu, sous le h1...
j'ai supprimé le "vertical-align: middle " sur img, qui ne sert de rien.
Avatar
Une Bévue
Le 14/12/2016 à 13:54, Olivier Miakinen a écrit :
As-tu essayé d'autres valeurs de vertical-align, telles que bottom ou
text-bottom ?

finalement j'ai mis ça :
h1
grid-column: 1
grid-row: 1
height: $header_height
line-height: $header_height
img
margin: 0 16px 0 8px
span
font-size: 32px
height: $header_height
line-height: $header_height
vertical-align: 20%
ici $header_height vaut 48px, mais il n'est pas respecté sur le span qui
d'après firebug fait 39.5px de hauteur...
peut-être devrais lui ajouter un "display: inline-block;" ???
j'essaie derechef, là efectivement la hauteur du span est bien de 48px,
mais pas vraiment centré en hauteur, il descend de qq pixels mais ce
n'est pas moche.
Avatar
SAM
Le 14/12/16 à 17:42, Une Bévue a écrit :
Le 14/12/2016 à 13:52, SAM a écrit :
Normalement et à mon idée que je partage avec moi-même, le table-cell
devrait, *sans autre artifice* (grid ? vertical-align, margin, etc.);
régler la question de l'alignement vertical qui en est son mode par
défaut.

sauf que comme je le disais, ça marche pô

Normalement ça marche
dans
les limites fixées
...
qui ne sont peut-être pas les mêmes que les tiennes ?
de mes essais, l'image se positionne centrée / aux minuscules
(et ça fait moche avec les majuscules)
css :
img { vertical-align:middle; height: 60px; border:1px red solid; }
div { border:1px solid; font-size: 60px; }
html :
<div>mon petit<img class="haut"
src="https://mdn.mozillademos.org/files/12245/frame_image.svg"
alt="link" width="32" height="32" />gentil texte</div>
cf :
https://mdn.mozillademos.org/fr/docs/Web/CSS/vertical-align$samples/Exemple?revision52984
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 14/12/16 à 17:50, Une Bévue a écrit :
Le 14/12/2016 à 14:11, SAM a écrit :
Ha!
vaguement testées ces 2 propositions (avec moins de tarabustages
accessoires il est vrai) et çà me parait OK

bon, align-self: center pour h1 c'est OK pour l'image, ça la centre,
mais du coup c'est le span qui descend, un peu, sous le h1...
j'ai supprimé le "vertical-align: middle " sur img, qui ne sert de rien.

essaie de sortir le texte du span (se passer de cette balise)
voir à voir ?
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
1 2