Centrage *** vertical ***

Le
Une B=c3=a9vue
dans une div, j'ai l'un à la suite de l'autre :
un span, un select, un input et une image svg

<div class="parent">
<div class="enfant">
<span>Recherche><select /><input><svg />
</div>
</div>

la class parent est à height 48px, line-height 48px

pour la class enfant je peux fixer ce que je veux question height,
padding et margin.

les hauteurs voulues pour span, select, input et svg sont 22 ou 24px.

Mon résultat actuel :
<http://www.cjoint.com/doc/17_03/GCpqcOArGIX_centrage-vertical.png>

peut-on faire mieux surtout côté svg ?
qui a un align-vertical: middle
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #26429042
Le 15/03/17 à 17:04, Une Bévue a écrit :
Mon résultat actuel :
peut-on faire mieux surtout côté svg ?
qui a un align-vertical: middle...


avec un cadre (border) autour de l'image ça aiderait à se rendre compte
de où elle se positionne et aussi sa hauteur relative au parent (qu'on
suppose être l'aplat marron)
D'ailleurs avec des cadres autour de chaque élément ça aiderait aussi
pour ces derniers
vu que tu ne nous donnes qu'une capture (figée) et qu'on ne peut
tripoter soi-même ...
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une B=c3=a9vue
Le #26429089
Le 15/03/2017 à 18:20, SAM a écrit :
avec un cadre (border) autour de l'image ça aiderait à se rendre compte
de où elle se positionne et aussi sa hauteur relative au parent (qu'on
suppose être l'aplat marron)
D'ailleurs avec des cadres autour de chaque élément ça aiderait aussi
pour ces derniers
vu que tu ne nous donnes qu'une capture (figée) et qu'on ne peut
tripoter soi-même ...

OK, merci, je fais ça et je reposte.
En fait la situation est plus compliquée.
C'est un <header /> dans lequel j'ai au plus 3 zones :
- logo et titre de la page ;
- recherche d'un élément (c'est la dont dont j'ai parlé (span, select,
input et svg)
- une dernière zone de login : pseudo image (avatar) et svg
je mets un border à tout ça et poste html et css.
Une B=c3=a9vue
Le #26429090
Le 16/03/2017 à 06:30, Une Bévue a écrit :
je mets un border à tout ça et poste html et css.

la copie écran avec un border d'1 px rouge :
le html :
<div class="App-header"><h2 class="App-header-logo"><svg
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
width="40" height="40"><use xlink:href="#unlocked"
fill="#55F255"></use><symbol id="archive" viewBox="0 0 512
512"><g><polygon points="256,307.7 384,192 304,192 304,96 207.6,96
207.6,192 128,192 "></polygon><path
d="M465.4,297.2l-71.4-55h-42l62,61.8h-50.6c-2.3,0-4.3,1.2-5.4,2.9l-18.4,45.5H172.1l-18.4-45.5c-1-1.8-3.1-2.9-5.4-2.9H97.8
l62.2-61.8h-42.2l-71.4,55c-10.6,6.2-15.8,19-14.1,31.6l8.7,66.9c2.3,13.1,9.7,20.3,28.1,20.3h373.8c19.1,0,25.8-7.6,28.1-20.3
l8.7-66.9C481.4,315.9,476,303.4,465.4,297.2z"></path></g></symbol><symbol
id="blank" viewBox="0 -256 1792 1792"><g
transform="matrix(1,0,0,-1,182.23729,1330.9831)"><path
d=""></path></g></symbol><symbol id="cancel" viewBox="0 0 16
16"><g><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8
0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z"></path><path
d="M12.2 10.8l-2.8-2.8 2.8-2.8-1.4-1.4-2.8 2.8-2.8-2.8-1.4 1.4 2.8
2.8-2.8 2.8 1.4 1.4 2.8-2.8 2.8 2.8z"></path></g></symbol><symbol
id="delete" viewBox="0 0 1000 1000"><g><path
d="M767.3,308.1H745v559.4h-73.4V308.1H549v559.4h-73.5V308.1H353v559.4h-73.6V308.1h-46.8c-55.3,0-100.3-0.8-100.3,0v584.5c0,53.8,44.9,97.4,100.3,97.4h534.6c55.3,0,100.2-43.6,100.2-97.4V308.1C867.5,304,822.6,308.1,767.3,308.1L767.3,308.1z
M915.7,132.5H696V72.7c0-34.7-61.9-62.7-98-62.7H402c-36.1,0-98,28.1-98,62.7v59.8H84.4c-27.6,0-49.9,22-49.9,49s22.3,49,49.9,49h831.3c27.6,0,49.9-21.9,49.9-49C965.6,154.4,943.2,132.5,915.7,132.5L915.7,132.5z
M598,132.5H402V108h196V132.5L598,132.5z"></path></g></symbol><symbol
id="edit" viewBox="0 0 528.899 528.899"><g><path
d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z
M518.113,63.177l-47.981-47.981
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
C532.495,100.753,532.495,77.559,518.113,63.177z
M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
L27.473,390.597L0.3,512.69z"></path></g></symbol><symbol id="invalid"
viewBox="0 0 24 24"><g><path
d="M14.8,12l3.6-3.6c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0L12,9.2L8.4,5.6c-0.8-0.8-2-0.8-2.8,0
c-0.8,0.8-0.8,2,0,2.8L9.2,12l-3.6,3.6c-0.8,0.8-0.8,2,0,2.8C6,18.8,6.5,19,7,19s1-0.2,1.4-0.6l3.6-3.6l3.6,3.6
C16,18.8,16.5,19,17,19s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8L14.8,12z"></path></g></symbol><symbol
id="link" viewBox="0 0 512 512"><path
d="M156.226,199.679c7.541-7.54,15.902-13.757,24.794-18.659c49.556-27.318,113.117-12.788,144.97,35.518
l-38.547,38.547c-11.059-25.227-38.5-39.565-65.813-33.456c-10.282,2.3-20.054,7.427-28.039,15.413l-73.898,73.896
c-22.433,22.433-22.432,58.936,0.002,81.369c22.433,22.433,58.935,22.433,81.368,0l22.78-22.779
c20.71,8.217,42.938,11.508,64.862,9.863l-50.278,50.278c-43.105,43.105-112.991,43.105-156.096,0
c-43.105-43.104-43.106-112.991-0.001-156.096L156.226,199.679z
M273.574,82.33l-50.278,50.278
c21.928-1.643,44.152,1.648,64.863,9.865l22.779-22.78c22.434-22.434,58.936-22.434,81.37,0c22.434,22.434,22.434,58.936,0,81.37
l-73.897,73.895c-22.501,22.501-59.061,22.311-81.368,0c-5.202-5.201-9.694-11.678-12.484-18.04l-38.546,38.546
c4.049,6.142,8.261,11.453,13.666,16.858c13.949,13.95,31.698,24.339,52.117,29.251c26.466,6.37,54.823,2.839,79.185-10.592
c8.892-4.903,17.254-11.119,24.794-18.659l73.896-73.895c43.105-43.105,43.105-112.991,0.001-156.097
C386.566,39.225,316.68,39.225,273.574,82.33z"></path></symbol><symbol
id="locked" viewBox="0 0 486.733 486.733"><g><path
d="M403.88,196.563h-9.484v-44.388c0-82.099-65.151-150.681-146.582-152.145c-2.225-0.04-6.671-0.04-8.895,0
C157.486,1.494,92.336,70.076,92.336,152.175v44.388h-9.485c-14.616,0-26.538,15.082-26.538,33.709v222.632
c0,18.606,11.922,33.829,26.539,33.829h321.028c14.616,0,26.539-15.223,26.539-33.829V230.272
C430.419,211.646,418.497,196.563,403.88,196.563z
M273.442,341.362v67.271c0,7.703-6.449,14.222-14.158,14.222H227.45
c-7.71,0-14.159-6.519-14.159-14.222v-67.271c-7.477-7.36-11.83-17.537-11.83-28.795c0-21.334,16.491-39.666,37.459-40.513
c2.222-0.09,6.673-0.09,8.895,0c20.968,0.847,37.459,19.179,37.459,40.513C285.272,323.825,280.919,334.002,273.442,341.362z
M331.886,196.563h-84.072h-8.895h-84.072v-44.388c0-48.905,39.744-89.342,88.519-89.342c48.775,0,88.521,40.437,88.521,89.342
V196.563z"></path></g></symbol><symbol id="login" viewBox="0 0 1000
1000"><g><path
d="M541.1,691.2c-12,12-12,31.4,0,43.3c12,12,31.4,12,43.3,0l211.3-211.3c6.4-6.4,9.1-14.9,8.7-23.2c0.4-8.4-2.3-16.8-8.7-23.2L584.4,265.5c-11.9-12-31.4-12-43.3,0c-12,12-12,31.4,0,43.3l160.6,160.6H40.6C23.7,469.4,10,483.1,10,500s13.7,30.6,30.6,30.6h661.1L541.1,691.2z
M867.5,71.3H255c-67.7,0-122.5,54.8-122.5,122.5v122.5h61.3V193.8c0-33.8,27.4-61.3,61.3-61.3h612.5c33.8,0,61.3,27.4,61.3,61.3v612.5c0,33.8-27.4,61.3-61.3,61.3H255c-33.8,0-61.3-27.4-61.3-61.3V683.8h-61.3v122.5c0,67.7,54.8,122.5,122.5,122.5h612.5c67.7,0,122.5-54.8,122.5-122.5V193.8C990,126.1,935.2,71.3,867.5,71.3z"></path></g></symbol><symbol
id="logout" viewBox="0 0 1000 1000"><g><path
d="M115.8,923.9C57.5,923.9,10,870.5,10,804.8V201.7c0-69.3,47.5-125.6,105.8-125.6h497.8c58.4,0,105.8,56.4,105.8,125.6v64.5c0,17.2-14,31.3-31.2,31.3s-31.2-14-31.2-31.3v-64.5c0-29.4-19.5-53.4-43.5-53.4H115.8c-24,0-43.5,23.9-43.5,53.4v596.6c0,29.4,19.5,53.4,43.5,53.4h497.8c24,0,43.5-23.9,43.5-53.4v-64.5c0-17.2,14-31.2,31.2-31.2c17.2,0,31.2,14,31.2,31.2v64.5c0,69.3-47.5,125.6-105.8,125.6L115.8,923.9L115.8,923.9z
M787.3,725.5c-8.4,0-16.3-3.5-22.2-9.8c-11.9-12.8-11.9-33.6,0-46.4l120-128.7c0.1-0.1,0.2-0.2,0.1-0.4c-0.1-0.2-0.2-0.2-0.4-0.2h-522c-17.2,0-31.2-14.8-31.2-33c0-18.2,14-33,31.2-33h521.9c0.1,0,0.3,0,0.4-0.2c0.1-0.2,0-0.3-0.1-0.4l-120-128.7c-11.9-12.8-11.9-33.6,0-46.4c5.9-6.3,13.8-9.8,22.2-9.8s16.3,3.5,22.2,9.8l171.7,184.2c6,6.5,9.1,15.2,8.7,24.5c0.4,9.3-2.7,18-8.7,24.5L809.5,715.7C803.6,722,795.7,725.5,787.3,725.5L787.3,725.5z"></path></g></symbol><symbol
id="plus" viewBox="0 0 42 42"><g><path
d="M37.059,16H26V4.941C26,2.224,23.718,0,21,0s-5,2.224-5,4.941V16H4.941C2.224,16,0,18.282,0,21
s2.224,5,4.941,5H16v11.059C16,39.776,18.282,42,21,42s5-2.224,5-4.941V26h11.059C39.776,26,42,23.718,42,21S39.776,16,37.059,16z"></path></g></symbol><symbol
id="search" viewBox="0 0 512 512"><g><path
d="M445,386.7l-84.8-85.9c13.8-24.1,21-50.9,21-77.9c0-87.6-71.2-158.9-158.6-158.9C135.2,64,64,135.3,64,222.9
c0,87.6,71.2,158.9,158.6,158.9c27.9,0,55.5-7.7,80.1-22.4l84.4,85.6c1.9,1.9,4.6,3.1,7.3,3.1c2.7,0,5.4-1.1,7.3-3.1l43.3-43.8
C449,397.1,449,390.7,445,386.7z
M222.6,125.9c53.4,0,96.8,43.5,96.8,97c0,53.5-43.4,97-96.8,97c-53.4,0-96.8-43.5-96.8-97
C125.8,169.4,169.2,125.9,222.6,125.9z"></path></g></symbol><symbol
id="terminal" viewBox="0 0 996 1138"><g><path d="M831 127H63c-35.35 0-64
28.65-64 64v640c0 35.35 28.65 64 64 64h768c35.35 0 64-28.65
64-64V191C895 155.64999999999998 866.35 127 831 127zM127 575l128-128L127
319l64-64 192 192L191 639 127 575zM639
639H383v-64h256V639z"></path></g></symbol><symbol id="unlocked"
viewBox="0 0 491.52 491.52"><g><path
d="M399.398,203.578h-19.802v-69.744C379.596,60.039,319.558,0,245.763,0h-0.004c-73.792,0.002-133.83,60.04-133.83,133.835
v1.435h47.753v-1.435c0-23.734,9.653-45.254,25.24-60.841c3.896-3.896,8.165-7.423,12.744-10.519
c9.162-6.193,19.572-10.671,30.77-12.968c5.596-1.149,11.392-1.753,17.323-1.753h0.004c47.467,0,86.08,38.613,86.08,86.081v69.744
h-86.084h-86.077h-47.753H92.122c-15.658,0-28.35,12.692-28.35,28.35v17.246v196.749v17.246c0,15.658,12.692,28.35,28.35,28.35
H245.76h153.639c15.656,0,28.35-12.692,28.35-28.35v-17.246V249.175v-17.246C427.747,216.27,415.055,203.578,399.398,203.578z
M274.161,403.177h-56.804l10.168-48.445c-9.507-6.05-15.858-16.614-15.858-28.719c0-18.828,15.263-34.092,34.092-34.092
c18.83,0,34.092,15.263,34.092,34.092c0,12.104-6.35,22.669-15.856,28.718L274.161,403.177z"></path></g></symbol><symbol
id="valid" viewBox="0 0 24 24"><g><path d="M22.2 3.5c.2-.3.3-.7.3-1.1
0-1.3-1-2.3-2.3-2.3-.7 0-1.4.4-1.8.9-.1.2-.2.3-.3.5l-9.5 16L4.2
12c-.4-.6-1.1-1-1.9-1-1.3-.1-2.3.9-2.3 2.2 0 .7.3 1.3.7 1.7l5.8 8c.4.7
1.1 1.1 1.9 1.1 1 0 1.8-.6 2.1-1.5L22.1
3.7s.1-.1.1-.2z"></path></g></symbol><symbol id="warning" viewBox="0 0
20 16"><g><path d="M10,0L0,16h20L10,0z M11,13.908H9v-2h2V13.908z
M9,10.908v-6h2v6H9z"></path></g></symbol></svg><span>Login and
Password</span></h2><div class="App-header-search"><div
class="App-header-search-content"><span>Recherche : </span><select
class=""><option value="-1">Toutes catégories</option><option
value="5346b6b5f7a7cbef00877f54">Abonnements</option><option
value="52304347e65b3908fd000005">Banque en ligne</option><option
value="52304347e65b3908fd000006">Cartes de paiement</option><option
value="52304347e65b3908fd000004">Clés de logiciels</option><option
value="52304347e65b3908fd000003">Comptes EMail</option><option
value="561017f06d627001a5000006">d620</option><option
value="5599078d6d6270017e000000">DropBox</option><option
value="52304347e65b3908fd000001">Formulaires</option><option
value="52304347e65b3908fd000002">Forums</option><option
value="52304347e65b3908fd000007">Free Marie</option><option
value="52304347e65b3908fd000008">Free Yvon</option><option
value="56b5ad0a4cfad10bb37760e3">FreeBox</option><option
value="552df94f6d62703026000000">Informations</option><option
value="5600210f4d61632307000000">j-kiosk</option><option
value="58a159d04cfad18276232ceb">MySQL</option><option
value="55db12536d62700178000000">ownCloud</option><option
value="55002032e65b390db1000001">Samuël</option><option
value="569b31446d6270479b000002">Skype</option><option
value="533e56eeaec454b200a65af1">WiFi</option></select><input class=""
placeholder="Entrez un titre"><button><svg
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
width="22" height="22"><use xlink:href="#search"
fill="red"></use><symbol id="archive" viewBox="0 0 512 512"><g><polygon
points="256,307.7 384,192 304,192 304,96 207.6,96 207.6,192 128,192
"></polygon><path
d="M465.4,297.2l-71.4-55h-42l62,61.8h-50.6c-2.3,0-4.3,1.2-5.4,2.9l-18.4,45.5H172.1l-18.4-45.5c-1-1.8-3.1-2.9-5.4-2.9H97.8
l62.2-61.8h-42.2l-71.4,55c-10.6,6.2-15.8,19-14.1,31.6l8.7,66.9c2.3,13.1,9.7,20.3,28.1,20.3h373.8c19.1,0,25.8-7.6,28.1-20.3
l8.7-66.9C481.4,315.9,476,303.4,465.4,297.2z"></path></g></symbol><symbol
id="blank" viewBox="0 -256 1792 1792"><g
transform="matrix(1,0,0,-1,182.23729,1330.9831)"><path
d=""></path></g></symbol><symbol id="cancel" viewBox="0 0 16
16"><g><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8
0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z"></path><path
d="M12.2 10.8l-2.8-2.8 2.8-2.8-1.4-1.4-2.8 2.8-2.8-2.8-1.4 1.4 2.8
2.8-2.8 2.8 1.4 1.4 2.8-2.8 2.8 2.8z"></path></g></symbol><symbol
id="delete" viewBox="0 0 1000 1000"><g><path
d="M767.3,308.1H745v559.4h-73.4V308.1H549v559.4h-73.5V308.1H353v559.4h-73.6V308.1h-46.8c-55.3,0-100.3-0.8-100.3,0v584.5c0,53.8,44.9,97.4,100.3,97.4h534.6c55.3,0,100.2-43.6,100.2-97.4V308.1C867.5,304,822.6,308.1,767.3,308.1L767.3,308.1z
M915.7,132.5H696V72.7c0-34.7-61.9-62.7-98-62.7H402c-36.1,0-98,28.1-98,62.7v59.8H84.4c-27.6,0-49.9,22-49.9,49s22.3,49,49.9,49h831.3c27.6,0,49.9-21.9,49.9-49C965.6,154.4,943.2,132.5,915.7,132.5L915.7,132.5z
M598,132.5H402V108h196V132.5L598,132.5z"></path></g></symbol><symbol
id="edit" viewBox="0 0 528.899 528.899"><g><path
d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z
M518.113,63.177l-47.981-47.981
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
C532.495,100.753,532.495,77.559,518.113,63.177z
M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
L27.473,390.597L0.3,512.69z"></path></g></symbol><symbol id="invalid"
viewBox="0 0 24 24"><g><path
d="M14.8,12l3.6-3.6c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0L12,9.2L8.4,5.6c-0.8-0.8-2-0.8-2.8,0
c-0.8,0.8-0.8,2,0,2.8L9.2,12l-3.6,3.6c-0.8,0.8-0.8,2,0,2.8C6,18.8,6.5,19,7,19s1-0.2,1.4-0.6l3.6-3.6l3.6,3.6
C16,18.8,16.5,19,17,19s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8L14.8,12z"></path></g></symbol><symbol
id="link" viewBox="0 0 512 512"><path
d="M156.226,199.679c7.541-7.54,15.902-13.757,24.794-18.659c49.556-27.318,113.117-12.788,144.97,35.518
l-38.547,38.547c-11.059-25.227-38.5-39.565-65.813-33.456c-10.282,2.3-20.054,7.427-28.039,15.413l-73.898,73.896
c-22.433,22.433-22.432,58.936,0.002,81.369c22.433,22.433,58.935,22.433,81.368,0l22.78-22.779
c20.71,8.217,42.938,11.508,64.862,9.863l-50.278,50.278c-43.105,43.105-112.991,43.105-156.096,0
c-43.105-43.104-43.106-112.991-0.001-156.096L156.226,199.679z
M273.574,82.33l-50.278,50.278
c21.928-1.643,44.152,1.648,64.863,9.865l22.779-22.78c22.434-22.434,58.936-22.434,81.37,0c22.434,22.434,22.434,58.936,0,81.37
l-73.897,73.895c-22.501,22.501-59.061,22.311-81.368,0c-5.202-5.201-9.694-11.678-12.484-18.04l-38.546,38.546
c4.049,6.142,8.261,11.453,13.666,16.858c13.949,13.95,31.698,24.339,52.117,29.251c26.466,6.37,54.823,2.839,79.185-10.592
c8.892-4.903,17.254-11.119,24.794-18.659l73.896-73.895c43.105-43.105,43.105-112.991,0.001-156.097
C386.566,39.225,316.68,39.225,273.574,82.33z"></path></symbol><symbol
id="locked" viewBox="0 0 486.733 486.733"><g><path
d="M403.88,196.563h-9.484v-44.388c0-82.099-65.151-150.681-146.582-152.145c-2.225-0.04-6.671-0.04-8.895,0
C157.486,1.494,92.336,70.076,92.336,152.175v44.388h-9.485c-14.616,0-26.538,15.082-26.538,33.709v222.632
c0,18.606,11.922,33.829,26.539,33.829h321.028c14.616,0,26.539-15.223,26.539-33.829V230.272
C430.419,211.646,418.497,196.563,403.88,196.563z
M273.442,341.362v67.271c0,7.703-6.449,14.222-14.158,14.222H227.45
c-7.71,0-14.159-6.519-14.159-14.222v-67.271c-7.477-7.36-11.83-17.537-11.83-28.795c0-21.334,16.491-39.666,37.459-40.513
c2.222-0.09,6.673-0.09,8.895,0c20.968,0.847,37.459,19.179,37.459,40.513C285.272,323.825,280.919,334.002,273.442,341.362z
M331.886,196.563h-84.072h-8.895h-84.072v-44.388c0-48.905,39.744-89.342,88.519-89.342c48.775,0,88.521,40.437,88.521,89.342
V196.563z"></path></g></symbol><symbol id="login" viewBox="0 0 1000
1000"><g><path
d="M541.1,691.2c-12,12-12,31.4,0,43.3c12,12,31.4,12,43.3,0l211.3-211.3c6.4-6.4,9.1-14.9,8.7-23.2c0.4-8.4-2.3-16.8-8.7-23.2L584.4,265.5c-11.9-12-31.4-12-43.3,0c-12,12-12,31.4,0,43.3l160.6,160.6H40.6C23.7,469.4,10,483.1,10,500s13.7,30.6,30.6,30.6h661.1L541.1,691.2z
M867.5,71.3H255c-67.7,0-122.5,54.8-122.5,122.5v122.5h61.3V193.8c0-33.8,27.4-61.3,61.3-61.3h612.5c33.8,0,61.3,27.4,61.3,61.3v612.5c0,33.8-27.4,61.3-61.3,61.3H255c-33.8,0-61.3-27.4-61.3-61.3V683.8h-61.3v122.5c0,67.7,54.8,122.5,122.5,122.5h612.5c67.7,0,122.5-54.8,122.5-122.5V193.8C990,126.1,935.2,71.3,867.5,71.3z"></path></g></symbol><symbol
id="logout" viewBox="0 0 1000 1000"><g><path
d="M115.8,923.9C57.5,923.9,10,870.5,10,804.8V201.7c0-69.3,47.5-125.6,105.8-125.6h497.8c58.4,0,105.8,56.4,105.8,125.6v64.5c0,17.2-14,31.3-31.2,31.3s-31.2-14-31.2-31.3v-64.5c0-29.4-19.5-53.4-43.5-53.4H115.8c-24,0-43.5,23.9-43.5,53.4v596.6c0,29.4,19.5,53.4,43.5,53.4h497.8c24,0,43.5-23.9,43.5-53.4v-64.5c0-17.2,14-31.2,31.2-31.2c17.2,0,31.2,14,31.2,31.2v64.5c0,69.3-47.5,125.6-105.8,125.6L115.8,923.9L115.8,923.9z
M787.3,725.5c-8.4,0-16.3-3.5-22.2-9.8c-11.9-12.8-11.9-33.6,0-46.4l120-128.7c0.1-0.1,0.2-0.2,0.1-0.4c-0.1-0.2-0.2-0.2-0.4-0.2h-522c-17.2,0-31.2-14.8-31.2-33c0-18.2,14-33,31.2-33h521.9c0.1,0,0.3,0,0.4-0.2c0.1-0.2,0-0.3-0.1-0.4l-120-128.7c-11.9-12.8-11.9-33.6,0-46.4c5.9-6.3,13.8-9.8,22.2-9.8s16.3,3.5,22.2,9.8l171.7,184.2c6,6.5,9.1,15.2,8.7,24.5c0.4,9.3-2.7,18-8.7,24.5L809.5,715.7C803.6,722,795.7,725.5,787.3,725.5L787.3,725.5z"></path></g></symbol><symbol
id="plus" viewBox="0 0 42 42"><g><path
d="M37.059,16H26V4.941C26,2.224,23.718,0,21,0s-5,2.224-5,4.941V16H4.941C2.224,16,0,18.282,0,21
s2.224,5,4.941,5H16v11.059C16,39.776,18.282,42,21,42s5-2.224,5-4.941V26h11.059C39.776,26,42,23.718,42,21S39.776,16,37.059,16z"></path></g></symbol><symbol
id="search" viewBox="0 0 512 512"><g><path
d="M445,386.7l-84.8-85.9c13.8-24.1,21-50.9,21-77.9c0-87.6-71.2-158.9-158.6-158.9C135.2,64,64,135.3,64,222.9
c0,87.6,71.2,158.9,158.6,158.9c27.9,0,55.5-7.7,80.1-22.4l84.4,85.6c1.9,1.9,4.6,3.1,7.3,3.1c2.7,0,5.4-1.1,7.3-3.1l43.3-43.8
C449,397.1,449,390.7,445,386.7z
M222.6,125.9c53.4,0,96.8,43.5,96.8,97c0,53.5-43.4,97-96.8,97c-53.4,0-96.8-43.5-96.8-97
C125.8,169.4,169.2,125.9,222.6,125.9z"></path></g></symbol><symbol
id="terminal" viewBox="0 0 996 1138"><g><path d="M831 127H63c-35.35 0-64
28.65-64 64v640c0 35.35 28.65 64 64 64h768c35.35 0 64-28.65
64-64V191C895 155.64999999999998 866.35 127 831 127zM127 575l128-128L127
319l64-64 192 192L191 639 127 575zM639
639H383v-64h256V639z"></path></g></symbol><symbol id="unlocked"
viewBox="0 0 491.52 491.52"><g><path
d="M399.398,203.578h-19.802v-69.744C379.596,60.039,319.558,0,245.763,0h-0.004c-73.792,0.002-133.83,60.04-133.83,133.835
v1.435h47.753v-1.435c0-23.734,9.653-45.254,25.24-60.841c3.896-3.896,8.165-7.423,12.744-10.519
c9.162-6.193,19.572-10.671,30.77-12.968c5.596-1.149,11.392-1.753,17.323-1.753h0.004c47.467,0,86.08,38.613,86.08,86.081v69.744
h-86.084h-86.077h-47.753H92.122c-15.658,0-28.35,12.692-28.35,28.35v17.246v196.749v17.246c0,15.658,12.692,28.35,28.35,28.35
H245.76h153.639c15.656,0,28.35-12.692,28.35-28.35v-17.246V249.175v-17.246C427.747,216.27,415.055,203.578,399.398,203.578z
M274.161,403.177h-56.804l10.168-48.445c-9.507-6.05-15.858-16.614-15.858-28.719c0-18.828,15.263-34.092,34.092-34.092
c18.83,0,34.092,15.263,34.092,34.092c0,12.104-6.35,22.669-15.856,28.718L274.161,403.177z"></path></g></symbol><symbol
id="valid" viewBox="0 0 24 24"><g><path d="M22.2 3.5c.2-.3.3-.7.3-1.1
0-1.3-1-2.3-2.3-2.3-.7 0-1.4.4-1.8.9-.1.2-.2.3-.3.5l-9.5 16L4.2
12c-.4-.6-1.1-1-1.9-1-1.3-.1-2.3.9-2.3 2.2 0 .7.3 1.3.7 1.7l5.8 8c.4.7
1.1 1.1 1.9 1.1 1 0 1.8-.6 2.1-1.5L22.1
3.7s.1-.1.1-.2z"></path></g></symbol><symbol id="warning" viewBox="0 0
20 16"><g><path d="M10,0L0,16h20L10,0z M11,13.908H9v-2h2V13.908z
M9,10.908v-6h2v6H9z"></path></g></symbol></svg></button></div></div><div
class="App-header-login"><span>yt</span><img class="avatar" alt=""
src="data:image/png;base64,<coupé>"><span><svg
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"
width="32" height="32"><use xlink:href="#logout"
fill="#F25555"></use><symbol id="archive" viewBox="0 0 512
512"><g><polygon points="256,307.7 384,192 304,192 304,96 207.6,96
207.6,192 128,192 "></polygon><path
d="M465.4,297.2l-71.4-55h-42l62,61.8h-50.6c-2.3,0-4.3,1.2-5.4,2.9l-18.4,45.5H172.1l-18.4-45.5c-1-1.8-3.1-2.9-5.4-2.9H97.8
l62.2-61.8h-42.2l-71.4,55c-10.6,6.2-15.8,19-14.1,31.6l8.7,66.9c2.3,13.1,9.7,20.3,28.1,20.3h373.8c19.1,0,25.8-7.6,28.1-20.3
l8.7-66.9C481.4,315.9,476,303.4,465.4,297.2z"></path></g></symbol><symbol
id="blank" viewBox="0 -256 1792 1792"><g
transform="matrix(1,0,0,-1,182.23729,1330.9831)"><path
d=""></path></g></symbol><symbol id="cancel" viewBox="0 0 16
16"><g><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8
0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z"></path><path
d="M12.2 10.8l-2.8-2.8 2.8-2.8-1.4-1.4-2.8 2.8-2.8-2.8-1.4 1.4 2.8
2.8-2.8 2.8 1.4 1.4 2.8-2.8 2.8 2.8z"></path></g></symbol><symbol
id="delete" viewBox="0 0 1000 1000"><g><path
d="M767.3,308.1H745v559.4h-73.4V308.1H549v559.4h-73.5V308.1H353v559.4h-73.6V308.1h-46.8c-55.3,0-100.3-0.8-100.3,0v584.5c0,53.8,44.9,97.4,100.3,97.4h534.6c55.3,0,100.2-43.6,100.2-97.4V308.1C867.5,304,822.6,308.1,767.3,308.1L767.3,308.1z
M915.7,132.5H696V72.7c0-34.7-61.9-62.7-98-62.7H402c-36.1,0-98,28.1-98,62.7v59.8H84.4c-27.6,0-49.9,22-49.9,49s22.3,49,49.9,49h831.3c27.6,0,49.9-21.9,49.9-49C965.6,154.4,943.2,132.5,915.7,132.5L915.7,132.5z
M598,132.5H402V108h196V132.5L598,132.5z"></path></g></symbol><symbol
id="edit" viewBox="0 0 528.899 528.899"><g><path
d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z
M518.113,63.177l-47.981-47.981
c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
C532.495,100.753,532.495,77.559,518.113,63.177z
M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
L27.473,390.597L0.3,512.69z"></path></g></symbol><symbol id="invalid"
viewBox="0 0 24 24"><g><path
d="M14.8,12l3.6-3.6c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0L12,9.2L8.4,5.6c-0.8-0.8-2-0.8-2.8,0
c-0.8,0.8-0.8,2,0,2.8L9.2,12l-3.6,3.6c-0.8,0.8-0.8,2,0,2.8C6,18.8,6.5,19,7,19s1-0.2,1.4-0.6l3.6-3.6l3.6,3.6
C16,18.8,16.5,19,17,19s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8L14.8,12z"></path></g></symbol><symbol
id="link" viewBox="0 0 512 512"><path
d="M156.226,199.679c7.541-7.54,15.902-13.757,24.794-18.659c49.556-27.318,113.117-12.788,144.97,35.518
l-38.547,38.547c-11.059-25.227-38.5-39.565-65.813-33.456c-10.282,2.3-20.054,7.427-28.039,15.413l-73.898,73.896
c-22.433,22.433-22.432,58.936,0.002,81.369c22.433,22.433,58.935,22.433,81.368,0l22.78-22.779
c20.71,8.217,42.938,11.508,64.862,9.863l-50.278,50.278c-43.105,43.105-112.991,43.105-156.096,0
c-43.105-43.104-43.106-112.991-0.001-156.096L156.226,199.679z
M273.574,82.33l-50.278,50.278
c21.928-1.643,44.152,1.648,64.863,9.865l22.779-22.78c22.434-22.434,58.936-22.434,81.37,0c22.434,22.434,22.434,58.936,0,81.37
l-73.897,73.895c-22.501,22.501-59.061,22.311-81.368,0c-5.202-5.201-9.694-11.678-12.484-18.04l-38.546,38.546
c4.049,6.142,8.261,11.453,13.666,16.858c13.949,13.95,31.698,24.339,52.117,29.251c26.466,6.37,54.823,2.839,79.185-10.592
c8.892-4.903,17.254-11.119,24.794-18.659l73.896-73.895c43.105-43.105,43.105-112.991,0.001-156.097
C386.566,39.225,316.68,39.225,273.574,82.33z"></path></symbol><symbol
id="locked" viewBox="0 0 486.733 486.733"><g><path
d="M403.88,196.563h-9.484v-44.388c0-82.099-65.151-150.681-146.582-152.145c-2.225-0.04-6.671-0.04-8.895,0
C157.486,1.494,92.336,70.076,92.336,152.175v44.388h-9.485c-14.616,0-26.538,15.082-26.538,33.709v222.632
c0,18.606,11.922,33.829,26.539,33.829h321.028c14.616,0,26.539-15.223,26.539-33.829V230.272
C430.419,211.646,418.497,196.563,403.88,196.563z
M273.442,341.362v67.271c0,7.703-6.449,14.222-14.158,14.222H227.45
c-7.71,0-14.159-6.519-14.159-14.222v-67.271c-7.477-7.36-11.83-17.537-11.83-28.795c0-21.334,16.491-39.666,37.459-40.513
c2.222-0.09,6.673-0.09,8.895,0c20.968,0.847,37.459,19.179,37.459,40.513C285.272,323.825,280.919,334.002,273.442,341.362z
M331.886,196.563h-84.072h-8.895h-84.072v-44.388c0-48.905,39.744-89.342,88.519-89.342c48.775,0,88.521,40.437,88.521,89.342
V196.563z"></path></g></symbol><symbol id="login" viewBox="0 0 1000
1000"><g><path
d="M541.1,691.2c-12,12-12,31.4,0,43.3c12,12,31.4,12,43.3,0l211.3-211.3c6.4-6.4,9.1-14.9,8.7-23.2c0.4-8.4-2.3-16.8-8.7-23.2L584.4,265.5c-11.9-12-31.4-12-43.3,0c-12,12-12,31.4,0,43.3l160.6,160.6H40.6C23.7,469.4,10,483.1,10,500s13.7,30.6,30.6,30.6h661.1L541.1,691.2z
M867.5,71.3H255c-67.7,0-122.5,54.8-122.5,122.5v122.5h61.3V193.8c0-33.8,27.4-61.3,61.3-61.3h612.5c33.8,0,61.3,27.4,61.3,61.3v612.5c0,33.8-27.4,61.3-61.3,61.3H255c-33.8,0-61.3-27.4-61.3-61.3V683.8h-61.3v122.5c0,67.7,54.8,122.5,122.5,122.5h612.5c67.7,0,122.5-54.8,122.5-122.5V193.8C990,126.1,935.2,71.3,867.5,71.3z"></path></g></symbol><symbol
id="logout" viewBox="0 0 1000 1000"><g><path
d="M115.8,923.9C57.5,923.9,10,870.5,10,804.8V201.7c0-69.3,47.5-125.6,105.8-125.6h497.8c58.4,0,105.8,56.4,105.8,125.6v64.5c0,17.2-14,31.3-31.2,31.3s-31.2-14-31.2-31.3v-64.5c0-29.4-19.5-53.4-43.5-53.4H115.8c-24,0-43.5,23.9-43.5,53.4v596.6c0,29.4,19.5,53.4,43.5,53.4h497.8c24,0,43.5-23.9,43.5-53.4v-64.5c0-17.2,14-31.2,31.2-31.2c17.2,0,31.2,14,31.2,31.2v64.5c0,69.3-47.5,125.6-105.8,125.6L115.8,923.9L115.8,923.9z
M787.3,725.5c-8.4,0-16.3-3.5-22.2-9.8c-11.9-12.8-11.9-33.6,0-46.4l120-128.7c0.1-0.1,0.2-0.2,0.1-0.4c-0.1-0.2-0.2-0.2-0.4-0.2h-522c-17.2,0-31.2-14.8-31.2-33c0-18.2,14-33,31.2-33h521.9c0.1,0,0.3,0,0.4-0.2c0.1-0.2,0-0.3-0.1-0.4l-120-128.7c-11.9-12.8-11.9-33.6,0-46.4c5.9-6.3,13.8-9.8,22.2-9.8s16.3,3.5,22.2,9.8l171.7,184.2c6,6.5,9.1,15.2,8.7,24.5c0.4,9.3-2.7,18-8.7,24.5L809.5,715.7C803.6,722,795.7,725.5,787.3,725.5L787.3,725.5z"></path></g></symbol><symbol
id="plus" viewBox="0 0 42 42"><g><path
d="M37.059,16H26V4.941C26,2.224,23.718,0,21,0s-5,2.224-5,4.941V16H4.941C2.224,16,0,18.282,0,21
s2.224,5,4.941,5H16v11.059C16,39.776,18.282,42,21,42s5-2.224,5-4.941V26h11.059C39.776,26,42,23.718,42,21S39.776,16,37.059,16z"></path></g></symbol><symbol
id="search" viewBox="0 0 512 512"><g><path
d="M445,386.7l-84.8-85.9c13.8-24.1,21-50.9,21-77.9c0-87.6-71.2-158.9-158.6-158.9C135.2,64,64,135.3,64,222.9
c0,87.6,71.2,158.9,158.6,158.9c27.9,0,55.5-7.7,80.1-22.4l84.4,85.6c1.9,1.9,4.6,3.1,7.3,3.1c2.7,0,5.4-1.1,7.3-3.1l43.3-43.8
C449,397.1,449,390.7,445,386.7z
M222.6,125.9c53.4,0,96.8,43.5,96.8,97c0,53.5-43.4,97-96.8,97c-53.4,0-96.8-43.5-96.8-97
C125.8,169.4,169.2,125.9,222.6,125.9z"></path></g></symbol><symbol
id="terminal" viewBox="0 0 996 1138"><g><path d="M831 127H63c-35.35 0-64
28.65-64 64v640c0 35.35 28.65 64 64 64h768c35.35 0 64-28.65
64-64V191C895 155.64999999999998 866.35 127 831 127zM127 575l128-128L127
319l64-64 192 192L191 639 127 575zM639
639H383v-64h256V639z"></path></g></symbol><symbol id="unlocked"
viewBox="0 0 491.52 491.52"><g><path
d="M399.398,203.578h-19.802v-69.744C379.596,60.039,319.558,0,245.763,0h-0.004c-73.792,0.002-133.83,60.04-133.83,133.835
v1.435h47.753v-1.435c0-23.734,9.653-45.254,25.24-60.841c3.896-3.896,8.165-7.423,12.744-10.519
c9.162-6.193,19.572-10.671,30.77-12.968c5.596-1.149,11.392-1.753,17.323-1.753h0.004c47.467,0,86.08,38.613,86.08,86.081v69.744
h-86.084h-86.077h-47.753H92.122c-15.658,0-28.35,12.692-28.35,28.35v17.246v196.749v17.246c0,15.658,12.692,28.35,28.35,28.35
H245.76h153.639c15.656,0,28.35-12.692,28.35-28.35v-17.246V249.175v-17.246C427.747,216.27,415.055,203.578,399.398,203.578z
M274.161,403.177h-56.804l10.168-48.445c-9.507-6.05-15.858-16.614-15.858-28.719c0-18.828,15.263-34.092,34.092-34.092
c18.83,0,34.092,15.263,34.092,34.092c0,12.104-6.35,22.669-15.856,28.718L274.161,403.177z"></path></g></symbol><symbol
id="valid" viewBox="0 0 24 24"><g><path d="M22.2 3.5c.2-.3.3-.7.3-1.1
0-1.3-1-2.3-2.3-2.3-.7 0-1.4.4-1.8.9-.1.2-.2.3-.3.5l-9.5 16L4.2
12c-.4-.6-1.1-1-1.9-1-1.3-.1-2.3.9-2.3 2.2 0 .7.3 1.3.7 1.7l5.8 8c.4.7
1.1 1.1 1.9 1.1 1 0 1.8-.6 2.1-1.5L22.1
3.7s.1-.1.1-.2z"></path></g></symbol><symbol id="warning" viewBox="0 0
20 16"><g><path d="M10,0L0,16h20L10,0z M11,13.908H9v-2h2V13.908z
M9,10.908v-6h2v6H9z"></path></g></symbol></svg></span></div></div>
le css global :
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
le css du <header /> :
.App-header {
grid-row: 1;
height: 48px;
line-height: 48px;
font-size: 22px;
background-color: rgba(127, 127, 127, 0.75);
display: grid;
grid-template-columns: 25% 1fr 25%;
}
.App-header-logo, .App-header-search, .App-header-login {
width: 100%;
height: 48px;
line-height: 48px;
}
.App-header-logo {
grid-column: 1;
font-size: 22px;
color: rgba(220, 220, 220, 0.5);
}
.App-header-logo svg {
vertical-align: middle;
margin: 0 8px 0 8px;
border: 1px solid red;
}
.App-header-logo span {
border: 1px solid red;
}
.App-header-search {
grid-column: 2;
height: 48px;
line-height: 48px;
padding: 8px;
}
.App-header-search-content {
height: 22px;
line-height: 22px;
}
.App-header-search-content span {
display: inline-block;
font-size: 18px;
height: 22px;
line-height: 22px;
vertical-align: middle;
border: 1px solid red;
}
.App-header-search-content select {
height: 22px;
margin: 0 0 0 8px;
border: 1px solid red;
}
.App-header-search-content input {
width: 300px;
height: 22px;
padding-left: 8px;
margin: 0 8px 0 8px;
vertical-align: middle;
border: 1px solid red;
}
.App-header-search-content button {
background-color: transparent;
border: 1px solid red;
}
.App-header-search-content button svg {
vertical-align: middle;
border: 1px solid red;
}
.App-header-login {
grid-column: 3;
text-align: right;
}
.App-header-login span {
border: 1px solid red;
}
.App-header-login img.avatar {
vertical-align: middle; /*-15%;*/
margin: 6px 6px 6px 16px;
width: 36px;
height: 36px;
border-radius: 18px;
border: 1px solid red;
}
.App-header-login svg {
vertical-align: middle;
margin: 8px;
border: 1px solid red;
}
comme premier élément d'un grid-layout de App :
.App {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 48px 1fr 26px;
}
le second étant App-main :
.App-main {
grid-row: 2;
background-color: transparent;
display: grid;
grid-template-columns: 25% 25% 50%;
}
et le dernier et troisième, le <footer /> :
.App-footer {
grid-row: 3;
background-color: rgba(127, 127, 127, 0.75);
display: grid;
grid-template-columns: 25% 25% 50%;
}
SAM
Le #26429192
Le 16/03/17 à 06:53, Une Bévue a écrit :
Le 16/03/2017 à 06:30, Une Bévue a écrit :
je mets un border à tout ça et poste html et css.


Malheureusement mon navigateur n'a pas l'air de comprendre tes CSS.
(les "grips" lui sont trop "modernes", il lui faut des "float left" pour
aligner les trucs)
De ce que j'ai pu voir, il semblerait qu'il faille ajouter une petite
marge haute/basse (3px + 1px de bordure ?) aux trucs (span ?) de H"px
pour les "recentrer" verticalement.
À moins qu'il n'y ait une astuce pour les rendre sensibles au
vertical-align ? (inline-block ?)
48 = (8*2)+(4*2)+22
8 de padding
+ 4 de marge
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une B=c3=a9vue
Le #26429217
Le 17/03/2017 à 11:43, SAM a écrit :
Malheureusement mon navigateur n'a pas l'air de comprendre tes CSS.
(les "grips" lui sont trop "modernes", il lui faut des "float left" pour
aligner les trucs)

ouais, display grid c'est un truc nouveau qui commence à pointer son nez.
De ce que j'ai pu voir, il semblerait qu'il faille ajouter une petite
marge haute/basse (3px + 1px de bordure ?) aux trucs (span ?) de H"px
pour les "recentrer" verticalement.
À moins qu'il n'y ait une astuce pour les rendre sensibles au
vertical-align ? (inline-block ?)

ouais, je vérifierai pour passer les spans en inline-block
j'ai essayé le coup des marges hautes/basses sur Safari comme sur
Firefox il me semble qu'elles ne sont pas respectées.
ça donne l'impression que, pour ce qui conserne le centrage vertical, le
butineur fait ce qu'il veut / peut...
par exemple, supposons que j'ai une image de 40px de haut dans une div
où la hauteur spécifiée est de 48px, si je mets une marge de 4px en haut
et en bas, ben c'est pas centré verticalement...
je re-regarderai ça et posterai quand ça sera OK...
48 = (8*2)+(4*2)+22
8 de padding
+ 4 de marge
Cordialement,
--
Une B=c3=a9vue
Le #26429220
Le 17/03/2017 à 11:43, SAM a écrit :
De ce que j'ai pu voir, il semblerait qu'il faille ajouter une petite
marge haute/basse (3px + 1px de bordure ?) aux trucs (span ?) de H"px
pour les "recentrer" verticalement.

bon je viens de faire un petit test
soit un header de 48px de haut (height et line-height à 48px) et un svg
de 40px, le html :
capture écran :
si l'image fait 96px de haut au lieu de 48px, c'est à cause de mon écran
retina...
autour du svg de mets une marge de 4px en haut et en bas.
avec :
vertical-align: -30%;
vertical-align: middle, c'est pas bon, ça fait descendre le texte...
idem pour le span autour du texte "Pages" avec le span en display:
inline-block
la ça roule pour la partie gauche de mon header, reste à faire le reste
du header, je reposterai après
Publicité
Poster une réponse
Anonyme