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) ?
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) ?
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>
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) ?
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 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
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
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 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 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) ?
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 ?
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) ?
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
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.
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 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
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 ? */
/*
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
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
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ô
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.
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 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.
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.
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.
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.
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 ?
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.
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 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
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; }
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 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
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
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
