alignement vertical d'une image

Le
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) ?
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Une Bévue
Le #26420487
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 ?) :
j'ai même ajouté dans h1 :
display: table-cell
mais rien n'y fait O[
SAM
Le #26420490
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 ?) :
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
Olivier Miakinen
Le #26420489
Le 14/12/2016 13:13, Une Bévue a écrit :
j'ai une image dans un header / h1 :
<header>
</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
Olivier Miakinen
Le #26420488
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
SAM
Le #26420492
Le 14/12/16 à 13:13, Une Bévue a écrit :
Bonjour,
j'ai une image dans un header / h1 :
<header>
</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
Une Bévue
Le #26420532
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ô
Une Bévue
Le #26420537
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.
Une Bévue
Le #26420536
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.
SAM
Le #26420545
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
SAM
Le #26420544
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
Publicité
Poster une réponse
Anonyme