Discussion:
alignement vertical d'une image
(trop ancien pour répondre)
Une Bévue
2016-12-14 12:13:37 UTC
Permalink
Raw Message
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) ?
Une Bévue
2016-12-14 12:17:38 UTC
Permalink
Raw Message
Post by Une Bévue
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[
SAM
2016-12-14 12:52:02 UTC
Permalink
Raw Message
Post by Une Bévue
Post by Une Bévue
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) ?
<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>
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
2016-12-14 12:55:54 UTC
Permalink
Raw Message
Post by SAM
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
Une Bévue
2016-12-14 16:42:32 UTC
Permalink
Raw Message
Post by SAM
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ô
SAM
2016-12-14 17:22:54 UTC
Permalink
Raw Message
Post by Une Bévue
Post by SAM
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?revision=1152984

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
2016-12-14 17:29:37 UTC
Permalink
Raw Message
Post by SAM
de mes essais, l'image se positionne centrée / aux minuscules
(et ça fait moche avec les majuscules)
img { vertical-align:middle; height: 60px; border:1px red solid; }
div { border:1px solid; font-size: 60px; }
<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>
https://mdn.mozillademos.org/fr/docs/Web/CSS/vertical-align$samples/Exemple?revision=1152984
je pense que ce qui change, dans mon cas, c'est que j'ai :

<h1><img ... /><span ...>Le texte</span></h1>

le texte est dans un span, généré automatiquement...
Olivier Miakinen
2016-12-14 12:54:37 UTC
Permalink
Raw Message
Post by Une Bévue
<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
Une Bévue
2016-12-14 17:03:07 UTC
Permalink
Raw Message
Post by Olivier Miakinen
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
2016-12-14 13:11:49 UTC
Permalink
Raw Message
Post by Une Bévue
Bonjour,
<header>
<h1><img ... /><span>...</span></h1>
</header>
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;
Post by Une Bévue
img
margin: 0 16px 0 8px
/* et peut-être ce passer de cette règle-ci ? */
/*
Post by Une Bévue
vertical-align: middle
*/
Post by Une Bévue
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
2016-12-14 16:50:49 UTC
Permalink
Raw Message
Post by SAM
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.
SAM
2016-12-14 17:24:17 UTC
Permalink
Raw Message
Post by Une Bévue
Post by SAM
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
Une Bévue
2016-12-14 17:35:17 UTC
Permalink
Raw Message
Post by SAM
essaie de sortir le texte du span (se passer de cette balise)
voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...

que mon code soit :
<h1><img className={iconClass} src="icons/maison.svg" />Villes de
France</h1>

ou :
<h1><img className={iconClass} src="icons/maison.svg" /><span>Villes de
France</span></h1>


dans le browser, ce qui apparaît, c'est :
<h1 data-reactid=".0.0.0"><img class="s_48 icon_green"
src="icons/maison.svg" data-reactid=".0.0.0.0"><span
data-reactid=".0.0.0.1">Villes de France</span></h1>

donc, je préfère le mettre dans mon code, du coup je dois y penser
question css.
SAM
2016-12-14 21:37:59 UTC
Permalink
Raw Message
Post by Une Bévue
Post by SAM
essaie de sortir le texte du span (se passer de cette balise)
voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
connais pas non plus :-(
tu n'as donc toujours que des excentricités ? ;-)
Post by Une Bévue
donc, je préfère le mettre dans mon code, du coup je dois y penser
question css.
Oui, OK


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
2016-12-14 22:08:21 UTC
Permalink
Raw Message
Post by SAM
Post by Une Bévue
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
tu n'as donc toujours que des excentricités ? ;-)
J'ai tenté d'aller voir ce que c'était ... à ce que j'ai compris c'est
un agitateur de code html déjà envoyé et affiché.

Je comprends mieux pourquoi de + en + de sites sont impraticables,
l'affichage n'y est jamais fini, ça saute tout le temps, pas moyen
d'arriver à y lire une phrase entière !

faut y désactiver le JS histoire d'avoir un peu la paix (et le remettre
si on veut continuer la visite)
En fait ... on se contente de fuir !


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
2016-12-14 22:14:46 UTC
Permalink
Raw Message
Post by SAM
Post by Une Bévue
ReactJS...
J'ai tenté d'aller voir ce que c'était ...
<http://putaindecode.io/fr/articles/js/react/#comment-2373012288>



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
2016-12-15 06:10:41 UTC
Permalink
Raw Message
Post by SAM
Post by SAM
Post by Une Bévue
ReactJS...
J'ai tenté d'aller voir ce que c'était ...
<http://putaindecode.io/fr/articles/js/react/#comment-2373012288>
ouais, j'ai lu, en diagonale, article pas mal.

je suis passé à ReactJS depuis 2/3 ans, maintenant, j'utilise Brunch
pour transpiler.

je suis, de loin, Svelte, qui me semble être une autre approche
intéressante où le code css fait partie des widgets.

avec ReactJS, le css est à part, sauf si on utilise du "functional CSS".
Une Bévue
2016-12-15 05:37:28 UTC
Permalink
Raw Message
Post by SAM
connais pas non plus :-(
ReactJS permet d'écrire une ligne de code comme ça :

maDiv = <div id="machin">Bidule</div>
Post by SAM
tu n'as donc toujours que des excentricités ? ;-)
excenticités, je ne sais pas mais des spans oui.
Loading...