将图像与文本基线对齐<div></div><div id="text_translate"><p>我有一个 CGI 脚本，它创建一个“导航辅助”，包含箭头图标和文本 label，如下所示：</p><p> <a href="https://i.stack.imgur.com/qQuGi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qQuGi.png" alt="导航辅助渲染"></a></p><p> 显然，如果文本基线与箭头图标的底部对齐，效果会更好。 箭头图标是几年前从 GNOME 16x16 箭头操作中复制的。</p><p> HTML 代码是这样的：</p><pre class="lang-html prettyprint-override"> <div><a title="Erster Eintrag" href="#A0"><img alt="|<" src="/ig16a/go-first.png" class="toolbar"></a> <a href="#A0" title="Vorheriger Eintrag"><img src="/ig16a/go-previous.png" alt="<" class="toolbar"></a> <span class="navaid">2 von 29</span> <a href="#A2" title="Nächster Eintrag"><img src="/ig16a/go-next.png" alt=">" class="toolbar"></a> <a href="#A28" title="Letzter Eintrag"><img alt=">|" src="/ig16a/go-last.png" class="toolbar"></a></div></pre><p> 使用的CSS是：</p><pre class="lang-css prettyprint-override"> body { color: black; }.navaid, .toolbar { font-size: small; font-family: sans-serif; background: #fffab7; margin-top: 1ex; margin-bottom: 1ex; }</pre><p> 如果有人想知道不同的类：这个想法是在打印页面时隐藏箭头图标......</p><p> 如果有人需要箭头图标（抱歉长度：）：</p><pre class="lang-text prettyprint-override"> # tar czf - icons | uuencode icons.tar.gz begin 644 icons.tar.gz M'XL(`````````^R<"3B4:\/'QQ;'DK%ES1I)Q>Q#62=.=@F)&#3VI;$/LK<- M1K84R5JV9`]%I`65?0\)T1`*=1A2?-1[ONM<N4Z]O(?W^VI^KO%<'N-Z'M=S M___W;VZ/D90Z8N&E:F5A:>7J)@D&(4,(*3L;]I0;X?\$M`("?ONR7>',+0@$ M?P'`$`@"#`.;X8B5_6`("`0#"'K]DR?Q=WBXN5NXKIS*5ASK_R`0D*"%NYV3 ME1P8@01.H3;I&23]RC[?_^Z#(&3@8?C]?_L\R6P,7\(NM?G'6(TX$@[_^_R# MUN0,C`0#?,&?>UI,^3/_KEBL^_>>]Z/O?_O+_3_AZ_5?:P,8G?(Z6?U3QUA7 M_T?1J]<:"4>2^W\K6-O_:N3^_X7XFO\O<=^T66.=_?\E_U`HB-S_6\).K_^; M60";\`(C_O-CK+__H7`8V;^WA&_[7P8$(O:_+\1?\_\E[ILP"ZR__V$@;(+< M_UO;VNN_9A?P6"F#_VA%,%W]_^7U'QRR,O^3^W_S6=O_$'+__T*LS;^_XOX/ MS@/KZO^O^8=#H?3^WPK^_OJO71/"[O=PEG0^9:/>8_Q,_0^&KG0-$@Y"0E>NM/Q*T\KJ#W/];P)K^1R+^VO\(.9BT-`Q"[O^;E;_/_X:COH8,Y;\;@D&^S3]D M91H0W))?_N+]'W)$^S`3/<]JOIG45)6/KFR,JP^Z?2N:?3XL6ZQLJ-U0,OIT M*_C26>)7ON9V5SGNKH>U=L=9N%H;<#B<I-TI:S>;A;?5)-,5)N&=+`\`0'%: M35E)7SH\/*K9@4T76*=07&''EG"CE(6M#S:2[7#=MB--D"B65&[3O:1.Z3VY M*'#/BRU"[@]AO+"/+O"5R@RK1'?PAW`O<.1J)E*:.&E_.YJ+V#@=+P7-DK#+ MKZHR^F1H.C"C&A4RR3/=JCQWS)@YDA$4:<.+WKUCG$#RQ=8KS]5&48@5B2HG MF56ZEW?E9?>5=ST)VQVA99FP3:/WA*@\\F:\Y[5KNFO?Z:X>E6#N/+/?/N?E MH5%:>BL_585WW"^52#<Q?T]L[TY^W#1SRN?*H^3N1@9K_J@K8D4EEK3")(VP MFH117K'%A3X*D<R4%/HIW)PX^P>TB(G1-<5G>@"VGM/G/A4>O)(P2@1&O"`$ MJ-*8IX+"IKSW&?A792=*B+Q_J;Q)H3@^D8`+H@UD4X(&2>5V7259Y=<KE34O M^4<4^%SS7'Q4T#=U^B9@OGKOH"=`EIK_P.-WYES+SMJ9EWGKU+$@YYNW``/+ MXDS.37?U@_D.P(,)EL/2A)T'^/NG'+%_'&WVRM*=%.?-S)95"PD<V"YF(.U. M2VT7>-=14;`B(?]Q4^K5CGC&%F1^GUIEL5IRFMV8R#AG4<C]JR=<G-E71X.: MBK9R'LH\^+\W-LEL/NOS/W.L1F:$#,@:&$E>_]T2R/[W._-=_]M8W-;P0_]# M@+_-/PR*)/O.5K:I_O.HJ_\EQC3:L^FR7[@/Q46[V/(D(;QX,1K-[7)NT^]X M82DD;,J`\)C(/+M1^<0\D,C"7G?+G.UL'G4)[_(1;AJ&M-LAG6).$&B=2DS; M^9`C`<Z<I"0W.,_1%V[IM^^UL2A)I^JW^N1&EP9U])\NT_%)MM%.4YI3R09\ ME:")M@GD,A$"[ZLVZ&RH-@8:D5Y9Z:C89H_G/N"KI@%V#CLW,XOMP\BCS;XJ MQ`@T/YL[%M;)2\8=J=3--Y?G["W8)EE1&X<TW&&=H1UA]:J]%G'RZ#[31&Z5 MD9)1V@^'*)($N/H04D2B9(/V#M<Y8K?"LFY#-Y:)KRZV1@;](ZHL2>`2*T6I MTTW1*<>[TJ?J`=C;^)?TU`:'?QPAT=R%UE))]4)%XPM*?US5%1_&4H=O3(VZ M7=>NZ']UR<EGZ.P2P8J/P)(A5J,UYI-[*FT\(++M_3,JP9E4-HRNI-EP7;Z< M\5L_3QQI,M2HJZM*>3&Q0&>;%_:+VQ?EZAQ9_&]4D*&=\N."A$O,2,8@W\IC M=MO]SE4]%-^6HC#TV2^?E8*621?FB/RDHQCPN%R7(:8$K,P/RLJMW=ZV5W`XM`[^DBV)51'9-J-W5:ALRPWK<9BEJ;$=:'2AD',PI69__V,X\,,TSP@:\#PJ? MD/UO*R#[WZ_-=_UO8W%;PP_]#XGX-O_PE0W9_[,`;\?_MIW4?*P,6%[]2*G, MC%G90^NNIJ5"V_4?'P?MF"DCX_F*[PU^]:WTZ$8'-B6NVN3$_D9K7%2<.+MQ MBSUJ3ZEIF+I*S,66DT*BJC5TY]J*..G'E<2]GF3/G%EBX:^L$?>+<U3B:T/I M2OUW3EZY^KR@IZ;I7=-%SKVU[Q#,4O<R20N.O<RWS3='#>N@>LU,\N+D.CDG M:[P#;HZ+)H[SM^KUB_CXO7E*/:.Z>*CG5:ZE@%1\Z3\6_'+3?)'VBV]S]%U M+#6HT$,P2*G;=F)-SI5:EXYGC%R/?<7JJ?LS-)[>+^ZC-JV9L/$X5`GVD.\W M3`0\NONH%[RWK]F:JT??+IBAN?X`]4[3];D$++(`/;`XXOR%H6OI3XO8]\SW M"T*-GTJ$;K)]9:)M&*-VR^D:$,6XP#=EZ.28;'8&2`EH;2&QNU2:&W"@SH8D MKNPM<U6AK>MEU15,DV*6;>"G?A_YPR4/(ML.,A:\N.\'><<+M/L7YSR3-"K3 M78:]?]TF6AX$Q9R1"\'5>YQ-Q=^JT#.L[:$>7.HV=+<J^8C2D%8Y=_1M*=#7 M>:B1]OAGVD&(%;LV`''QN9/$\.7WG8.ITFSS3RN>9=)"8P?B%?0<2O'?Q(5" M2D:*`RTSC?S"M.C22M09'W-TP,44I01>Q&]\5TH<.^_L0YNW=U$FE`*SP`+$ M9&J-?$[<V>O$W4'@A_=+C?17:P19:G\,UN=_IZR\W+:&_U9VD,UO"R#[WZ_- M=_UO8W%;PP.6_Q,@LO]M"9N^_J>GY<"FRRZ'C?;-2C7=%4[-<3`X3P+/(.1* M3Q\?GWZ;])'AI8+S$CY`T6O0V$5(7REKUN&57HR^@W%?9'R3IOQ+EU9/'LQN M"JE[.$[2-:>IBBETI'*O4,.</VRO-FOPKK8&3Q.SNIFS(X=R?\C08]*+2/OT M)"3E@2C9DIVD^66ZP;'8SD_/XF/*S@&EG;I;KUYDB"[86<;<`MK98+7_185> MS7:@1S[XTW$L0@W=K5Z?0.,PM]_^9=%V;E9*P?`D@>L3=5GLG`5W[\+1`<NY M5?\SCKE2`8IHST8)&9^0B[N45%I*=;F^/EXCWG'F?<7'O7TN#L9/,4,J;;G- MD00+1@;,%O[1"<`:@G/IO5U-R0=-YT:@23T7'793ZL(4@8].T*I9_>Q`[3); MG3)/BA;=ZDOJU?=%J"J*YCF#J;O]"0;.Z6);_<:81B<@'S,K-V8KFJPS9_[' MQ\9:KP,8,",D?XSSELDI"@M@RV+:'THOV]3S1,/\S-3Y92VN%[YA/"\V15HD MGAZV81YARAWYN;OZI:B%^M=MA9ZG:7A'X+DW2#JQV9.:$.?[#BHH'BN)#K\: M^/"[-]/(.]A[=&C/A$E<65,`H,/T_IJ`ZQF&JP,%K'P_)>OS/WL/IPW\16@C M_@>#D_UO*R#[WZ_-=_UO8W%,PX_\?_5FOS7^.R;[WU,PGZS_=6_CH9>FX*=NM[`8`*(]^]?V:*#E--@NNNF52%<YI,\OEJR@6;L,?7)0GA5GU1-1VA]=RA">< M^=U0C6"FL9N6M=_%,?)&+9"]];$R&Y#572GEM,W>V_#]N,JVJ0J21[#^B>$Q MK:][66]_,_G`Y7;GH-?Y;,:\6NPL>O2%+`U%[C4&JR`Z7>>YCD3WYENW7MR" M<S":>(V`]\23^#P_'KZP^#;O=(<JJTJZO6`:L?`J7CR]Z"9*7:IX=@Z=AU8$ M<V=('EJ$N?C8>DV>';`OQF=Q;]?O)+PE.(_18V2;4R7\I@U/9L[B_=#LS\8W M&SXPO7#/,&+AXG&%_%/L"I)Y\0Y19Z/;&5Z_N^@9=E5*);=P\?I,V_%,8NFL M]K[7P@S/J@),03IO5-J73OKK1H@,+,-/K62-\L%UFMAZ>V";AV\+E1D&H[;> M[L.)[;$MF]@-Y+99<A0[87G>112Q?)Z7-W=GN>T/N)84@:\(:';,OM.4R5PQ M:,V8I7A9?C-ULI@TD4`;X/;M:,X)HJ,;C>79MX/%O*'_4SA@)*P=7,V)OKHX MF5=,GB[75K%(-,)2>]\]?WM,C)S<;/(=E<*/J3GM<H(DCQ.RH_AWMLXR?R:KM)9VWB\]<NLNA-?GP??6"WO3P:$=>+'V0OO'G(NX%]:TNKEO1=$V.-Y\"PYUX M3[1ZL=Y#Y#7TFV+C:LT3S9^(W>Y%R_#E4MS-KWMG6RR2I'IL>;.2KT?VYYYO MW*ERE:P&`XWNS3[GY-DG<Z'X7(9>/-9$@A;3;*C7#-M2:1GW3$64L4G[?J/+ MKL]$[?%DN7?G(2[&D$;)^P`>$F57?#[;>G6<DO5S<UB:_SF[6GG,83W<UC<I MK-O_("`(C/S_'UL"V?]^,:[K,QN+^QI^Y']@$;3._,-;<++_:06?MO[7\>,Z M7Y]]QQ%VTX-J\9KP1,L?^+;FG78&^PUV/Z#OD6DJGFD&Y0"1@)9Y*O_`9;$1 M)0EU#H[6PRI*(%0ZIL_E`"8FDN'IG&A[WZX/@T$U;@4DM;-,OR8**&9'><() MYI6'NI%)-<$J+F(_0(<"?R5SU"552_D/93TI::[EV,9]PT>C]M">MS/$C_7$ MUO1>/XW#-FFD13,YJC5D3IZWZ\?/U.CF%+I@:%H[1%GR/>73Z]#'NX(]4>9Q MG@EX-*G<\&?;3C=Q^T7*)T5G;U$<E%IO7BW?+8IKMV5<XLP_8SOZT;BP0XF' MRU1$.`RCC"84<NH\S1NC%WL8:='+`>A+[#IYJ/O*F$T``2,0,X>+H0IZ@?=P M&_&SF]2%`EX:]//R+?\4<,Z5>,".\O*G4X@3?,8B3">L:?&+\O,<-B'HTSY1 M?I">0,<YB-G*:_LL#3;EZT-/<$&;S`(*AXUJ&\/*6JA:*YJ*7AZ,&T0K4YC= M]]5Y*+W'QUD8\-.DVN;6@'E5R?+#_0`OD&H1@454?5L*T^:[&GW3;IY$-^:. MIZPLE?G=G;%#T_CX5O>=#OJ#??-2=RYZ/&DHN_"H%6FM'^IJS3JR2\2ZBFKP M=0#+R"YY`%N@X>4/SQ=I/T//\9N7QTY9"/[&5B?_YW$NKMCG=8['6Q@_0^; M)/O:ED#VOU^:[_K,QN*^AA_Y'P@)^],_P#"R_VT)F^9_37_Z7[T]NQ*[7*=; M,],AL=K#RL4%(2&6(O1YKWX'*CGVTY6[C/96.J8M-1L\3&V2_J`D03$8GY(C MK6<A=G%G-/<D]^D.@4X/4W>DIO4?;KF$F^4=;J27>F5<+:;LE]_:4<3%45/< MV26WFXLI-#2:&)8Y$<P[>=P9X[,W6+SU\)4<ZI3X;I(UIP47.H1W66YB.4X- MOZ#+T0`+$I<R9A:RX?$D)HFE.-"*@AN47_5+4[R<*3*2\PQ6VR@IM*_/CV.0 M,X_8'2']'I0N*@VBF<@B'-9VJ-Y3XQTG@)F.Y8'/^Z:$A'A_O\6N<*;FIL?Q M0>:1YB`"RWD6R;Z:PCL@*H#M9UG]\:I2YK2*-K;MC(#(.?PU<37997'5N#@4 M5_HY&F^;Q),`(9;*W]18+,J"(<WCC0QMG>R1.)\]KY,FI),%$Q5P?Q,X1OS, M*D$7?;,,3_DI`%KEWLCD1M:]WECHB+O?L+1`O%EB<M",S3^3-@9ZP^6LP.RQ M:;$`7GB4`>&]U.'I.`>'^K`.NZ*;?L#L[\7:::1M;IZU9A?H%*`1F'K`J-PS MO<N^=?D8M5]N5*\36C01;9`$PF0>\MG;:IB>7+@>(::P;)XN95[S]5#`-",S MO=X]L:)];?MCAFQ^/P_K\S]K:U>W]=\1M`'_@T/([_^U)9#][],FN_ZWL;BO MX8.K,^`U^,_R_M]D_]M\-LW_>K_ZG]^_[O^:PD"LHS43J`EFV=RYQJ'BJG,< MP8*O4#;Z+0)#9G$,+3,"[J./*UMJ;M/87838E2(E]<5=8)W'G""FFM66$&AW MC:+CZ",&9GY2TNEW<E/]]0>8NRD;]*Q[*R["4<\8V_TI.^;GCBL=J,6F.N'G M+D`H%-^I&9V<1W&<MOK#*TBS3*[$6>%DY'BLP90M%^?0_[1S[]]0IW$`Q[\V M8T:#&'+-;18QLDJA8D)R*9>2$L?E4J-5F'&_M2$-@U5)R=,$6(U.XY(:I;08 M<PQ?KDGCTC0N76A"F]6@6KO?[F_.J9-S<G:WY_4';'_Z/.>\SW?>SS<;+]WU MB'R>ZK'VEJ8`CW^HO$Q,EF:NY%RC3X^IK,[`5_<0]5TWG_#*"C):'>=4=(4X MKF@)U?\B^M"LNLSYF?7[+8_ZPT3C92'E"?SUD*M1P_W2.#W<0:))<"<V^';4 M%9>ECI)M%&_7Y$PV'7A%*$1*FVI,^ZQOXP7NE?,)SJ`I$<[3`E6?(7_$U;X4 MS'B4R'Z576:$WL?H,:3J'\PQ&1528K*#,,J9LG#_:E\S7LG-#VQTG)T=?VKU MV1#G)IT;8W'HM6)^?PV_EI=[FQE77:9N%W97?";/L_Z)E]K<<D+HB<-X_?$` MIRPUNT^YB7PD;,46T\A[M\^-F#\J\^MS@ENA?;X-OR03:KBQQ[)P:7NR-%(O MS?Z?,(!<R<.V^:>4J)@"J>;($AK&2Z+<U[9^)"'!U)1380#%UYS.QC.L]#`E M6SL.;8F<GQ_0@O]MG]=_!%(T<8G>_X'^6Q*@_[YN'^V_Q1WW!3YY_[=AP?XO M>/^W1+Y8_S7_LP]\ED5<88WFLGQIAFIFB/ZP75E:/LD!F8DF:>*I*4DV)D\EM"^Z*P3RN#L<@\J![/I+^:%AZX7;7?/R+)`?;/QZ;60KZ1-]3AMJPZZ*O'BCL M=F0:LTC/5>UMIVE7=DA$<):+G4>^$39LJ"V"H*"Q1NW7<G#*-WHP*(95:9%^ M<&H"!6%<R18OY-D'Q*V4AP;Y=O([[DV*791SHFU^-IJHDZU-)UW&RE_,1:9V M;S(+_M8Q'=<1P?&"OR:J80/5'(L,C+>%)CD6EOSJ-_(RQ10U`<4TI")F)V]1 MF947/63&^46AI>+[4T;@LG2I01F=E4Q>!\.#K<+Q$WD\#CV=D!B`[WFN`H=N M3,5UB4[*C/$GV-@,#"54-ZMJ<-9&BD#FT/0<FLPLQ3H9Y:U,`PUTIWV[D)30 MKW33O;N^5Q-IY$$[P1,6M['/4A4T3PE[_*,C.8SUW+H*X@;26D-#]YT6:<OU M,NCT-NM;\`(%/^J[G!V$<\).Z6));M\D,GRRU)WY]+92R.5Q6*H&LC_(A3BX M=HM$)[N'9W\E?OC]8_7$D:+RUO;8P!88(?,=9"D6HQ\T>8@H!Z%=!VNG7K5. M'9FS)0MTXB3#%>6TQ^:G!=3>_\WG]5^0WV+N`Q;3?\9@_V-)@/[[NGVT_Q9W MW!?X=/^9+.@_([#_NR2^6/]Q_^Z_Y"P7)]7Y_\'TMAPEZR@&_B:SJM5SEU<` MVQU;@4U.DK^FQV8*ZB?CEVT;*<J)1_Q,:=AZ/3F/@35,KZQ2[Y3(_BYM76!5 M)_^X1:K?1GXW_(G?0"Q-T')?2EM+QV%[97ZPT#>=AU))&W6J52!=>((L\LPR MPXEF[2$A*YNZT6P.2W_I&'@'E:C4KO$VX[3B-;,7^\ENR72--?2C4'/42MV- M,<IRCHWL-<1+PZI4%H_L=JZO"G40@GI'<URJ>W-AG@0?";4:PX?4-2GPV4WM MRH53$U8LR2)=G!@"@=7,2]2:&1E^7UJM_,J`H,O5_/UZ&:F4'(^&3\<GVG<M MJZ^OAWP*\<<^#%>&D/+KN>-*D][]YJA-(IN8)RJ[Z\2A@?%<-;5KZ9JX&HW$ MO&GI)+2V3>T-2'97^-Q@3[#?=!1J'S-M++=V#[H5FE:#=?"Z6R'U(963%G&; M#T=0U?2F)$;YY$=!L'>!EL9/8B9M^6R,]8]?WW^BGLQY=D;5_5\_6!OU3EU M>G!QM@DS<SEEV\X!-\9>M`6O:LJ@:**/-N+&@&/B+BG6299+%$@&>[]S>$YY MYI*CJN58\J#EH&7KCX]@EA0!]T&`1?_\K(#Z`P`````````````````````` 5````````````^/?X$XK8@%``H``` ` end</pre></div>

Question

I have a CGI script that creates a "navigation aid" consisting of arrow icons and text label like this:

Obviously it would look much better if the text baseline would align with the bottom of the arrow icons. The arrow icons were copied from GNOME 16x16 arrow actions a few years ago.

The HTML code is this:

<div><a title="Erster Eintrag" href="#A0"><img alt="|<" src="/ig16a/go-first.png" class="toolbar"></a> <a href="#A0" title="Vorheriger Eintrag"><img src="/ig16a/go-previous.png" alt="<" class="toolbar"></a> <span class="navaid">2 von 29</span> <a href="#A2" title="Nächster Eintrag"><img src="/ig16a/go-next.png" alt=">" class="toolbar"></a> <a href="#A28" title="Letzter Eintrag"><img alt=">|" src="/ig16a/go-last.png" class="toolbar"></a></div>

The CSS used is:

body {
    color: black;
}
.navaid, .toolbar {
    font-size: small;
    font-family: sans-serif;
    background: #fffab7;
    margin-top: 1ex;
    margin-bottom: 1ex;
}

If someone wonders about the different classes: The idea was to hide the arrow icons when printing the page...

In case someone needs the arrow icons (Sorry for the length:):

# tar czf - icons | uuencode icons.tar.gz
begin 644 icons.tar.gz
M'XL(`````````^R<"3B4:\/'QQ;'DK%ES1I)Q>Q#62=.=@F)&#3VI;$/LK<-
M1K84R5JV9`]%I`65?0\)T1`*=1A2?-1[ONM<N4Z]O(?W^VI^KO%<'N-Z'M=S
M___W;VZ/D90Z8N&E:F5A:>7J)@D&(4!(*3L,]I0;X!\$M`("!ONR7>';+0@$
M!P'`$`@"#`?!X8B5_6`("`0#"'K]DR?Q=WBXN5NXKIS*5ASK_R`0D*"%NYV3
ME1P8@01!H3!I&23]RC[,_^Z#(&3@8!C]?_L\R6P.7\(NM;G'6(TX$@[_^_R#
MUN0?C`0#!.&;>UI?^3/_KEBL^_>>]Z/O?_O+_3_AZ_5?,P?8G,(Z6?U3QUA7
M_T,1J]<?"4>2^W\K6-O_,N3^_X7XFO\O<=^T66!=_?\E_U`HB-S_6\)?K_^:
M60",\`(C_O-CK+__H7`8V?^WA&_[7P8$(O?_+\1?\_\E[ILP"ZR__V$@!(+<
M_UO!VNN_9A:P6"F#_VA%:%W]_^7U'QRR.O^3^W_S6=O_$'+__T*LS?^_XOX/
MS@/KZO^O^8=#H.3^WPK^_OJO71/"[O=PEG0^9;/>8_Q;_0^&KG0-$@Y"0E>N
M/Q*T\KJ#W/];P)K^1R+^VO\(:9BT-`Q"[O^?E;_/_X;COH8?Y!\,@D&^S3]D
M91H0W)),_N+]'W)$^S`3/<]JOIG45)6/KFR!JP^Z;2N?!3XL6ZQLJ-U0:OIT
M*_C26>)7ON9V5SGNKH>U=L=9N%H!<#B<I-TI!S>,A;.5)-;5)N&=+`\`0'%;
M35E)7SH\/*K9@4T76*=07&''EG"CE(6M#S:2[7#=MB--D"B65&[3O,1;Z3VY
M*'#/BRU"[@]AO+"/+O"5R@RK1'!PAW`O<;1J)E*?,&E_?YJ+V#@=+P7-DK#+
MKZHR^F1H:C"C&A4RR3/=JCQWS)@YDA$4!<?+WKUCG$#RQ=8KS]5&48@5B2HG
MF56ZEW,E9;>5=ST)VQVA99FP3!/WA*@\\F:\Y[5KNFO;Z;X>E6#N/+/?/N!E
MH5%,>BL_585WW"^52#<Q:T]L[TY^W#1SRN:*H^3N1@9K_J@K8D4EEK3")(VP
MFH117K'%A3X*D<R4%/HIW)PX^P>TB(G1-<5G>@"VGM/G/A4>O)(P2@1&O"`$
MJ-*8IX+"IKSW&:A792=*B+Q_J.Q)H3@^D8`+H@UD4X(&2>5V7259Y=<KE34O
M^4<4^%SS7'Q4T#=U^B9@OGKOH"=`EIK_P?-WYES+SMJ9EWGKU+$@YYNW``/+
MXDS!37.U@_D:P(.)EL/2A)T'^/NG'+%_'&WVRM*=%..-S)95"PD<V"YF(:U.
M2VT7>-=14?`B(?]Q4^K5CGC&%F1^GUIEL5IRFMV8R#AG4<C]JR=<G-E71X::
MBK9R'LH\^+\W-LEL/NOS/W?L1F:$#?@?&$E>_]T2R/[W:_-=_]M8W-?P0_]#
M@+_-/PR*)/O?5K!I_O?HJ_\EQC3;L^FR7[@/Q46[V/(D(.QX.1K-[7)NT^]X
M82DD?.J`\)C(/+M1^<0\D,C"7G.+G?UL'G4)[_(1.AJ&M-LAG6).$&B=2DS;
M^9`C`<Z<I"0W!?_1%V[IM^^UL2A)I^JW^N1&EP9U])\NT_%)MM%!4YI3R09\
ME.")M@GD:A$"[ZLVZ&RH-@8.D5Y9Z:C89H_G/N"KI@%V#CLW,XOMP\BCS:XJ
MQ`@T/YL[%M.)2\8=J=3--Y!G["W8)EE1&X<TW&&=H1UA];J]%G'RZ#[31&Z5
MD9)1V@^'*)($N/H04D2B9(/V#M<Y8K."LFY#-Y:)KRZV1@.](ZHL2>`2*T6I
MTTW1*<>[TJ:J`=C;^),TU`;'!QPAT=R%UE))]4)%XPM*,US5%1_&4H=O3(VZ
M7=>NZ']UR<EGZ,P2P8J/P)(A5J?UYI-[*FT\(++M_3.JP9E4-HRNI-EP7;Z<
M\5L_3QQI.M2HJZM*>3&Q0&>;%_.+VQ,EZAQ9_&]4D*&=\N."A$O:2,8@W\IC
M=MO]SE4]%-^6HC#TV2^:E8*621:FB/RDHQCPN%R7(,8$K;P/RLJMW=ZV5W`X
M`[^DBV)51'9-J-W5;ALRPWK<9BEJ?$=:'2AD'?PI69__V:X\;?TSP@;\#PJ!
MD/UO*R#[WZ_-=_UO8W%?PP_]#XGX-O_PE0W9_[:`?\?_MIW4.*P,6%[]2*G,
MC%G90^NNIJ5"V_4;'P,MF"DCX_F*[PU^];WTZ$8'-B6NVN3$_D9K7%2<!+MQ
MBSUJ3ZEIF+I*S:66DT*BJC5TY]J*!?G'E<2]GF3/G%EBX.^L$,>+<U3B,T/I
M2OUW3EZY^KR@IZ?I7=-%SKVU[Q#!4O<R20N?O<RWS3='#>N@>LU:\N+D,CDG
M:[P#!HZ+)H[SM^KUB_CXO7E*/!;Z>*CG5:Z,E@%1\Z3\6_'+3,)'VBV]S]%U
M+#6HT$,P2*G,=F)-SI5:EXYGC%R/?<7JJ;LS-)[>+^ZC-JV9L/$X5`GVD,\W
M3`0\NONH%[RWK]F;JT??+IBAN,X`]4[3],D$++(`/?`XXOR%H6OI3XO8]\SW
M"T*-GTJ$?K)]9:)M&*-VR^D.$!6XP#=EZ,28.'8&2`EH.2&QNU2:&W"@SH8D
MKNPM<U6AK>MEU15?DV*6:>"G;A_YPR4/(ML,.A!\N,\'><<+M/L7YSR3-"K3
M78.]:]TF6AX$Q9R1"\'5>YQ-Q=^JT#!L[;$>7!HV=+<J^8C2D%8Y=_1M*=#7
M>:B1]OAGVD&(%.LV`''QN9/$\:7WG8.ITFSS3RN>9=)"8P!B%?0<2O',Q(5"
M2D!*`RTSC;S"M:C22M09'W-TP?44I01>Q&]\5TH<!^_L0YNW=U$FE`*SP`+$
M9&J-?$[<V>O$W4'@A_=+C.17!P19!G\:UN=_IZR\W+?&_U9VD?UO"R#[WZ_-
M=_UO8W%?PP;6_Q!@LO]M"9N^_J>GY<"FRRZ'C;;-2C7=%4[-<3`X3P+/(!1*
M3Q\:GWZ:])'AI8+S$CY`T6O0V$5(7REKUN&57HR^@W%,9'R3IOQ+EU9/'LQN
M"JE[.$[2-;>IBBETI'*O4;:</VRO-FOPKK8&3Q,SNIFS(X=R;\C08]*+2/OT
M)"3E@2C9DIVD^66ZP?'8SD_/XF/*S@&EG.I,KUYDB"[86<:<`MK98+7_185>
MS7.@1S[XTW$L0@W=K5Z:0?.PM]_^9=%V!E9*P:`D@>L3=5GLG`5W[\+1`<NY
M5.\SCKE2`8IHST8)&9^0B[N45%I*=:F^/EXCWG'F;<7'O7TN#L9/.4.J!?G-
MD00+1@!?%O[1"<`!@G/IO5U-R0=-YT?@23T7'793ZL(4@8]!T*I9_>Q`[3):
MG3)/BA?=ZDOJU.=%J"J*YCF#J,O]"0.?Z6)?_<:81B<@'S!K-V8KFJPS9_['
MQ\9:KP,8!":D,XSSELDI"@M@RV+;'THOV]3S1./\S-3Y92VN%[YA/"\V15HD
MGAZV81YARAWYN,OZI?B%^M=MA9ZG;7A'X+DW2#JQV9.?$;?[#BHH'BN)#K\.
M^/"[-]/(:]A[=&C/A$E<65,`H./T_IJ`ZQF&JP.%K'P_)>OS/WL/IPW\16@C
M_@>#D_UO*R#[WZ_-=_UO8W%?PX_\;_5FOS7^!R;[WU;PGZS_=6_CH9>FX*=N
M[`8`*(]^];V:*#E--@NNNF52%<YI?\OEJR@6.L,;7)0GA5GU1-1VA]=RA"><
M^=U0C6"FL9N6M=_%??)&+9"]];$R&Y#572GEM?W>V_#]N,JVJ0J21[#^B>$Q
MK,][66]_;_G`Y7!GH-;Y;!,\6NPL>O2%+`U%[C4&JR`Z7>>YCD3WYENW7MR"
M<S":>(V`]\23^#P_'KZP^#:O=(<JJTJZO6`.L;`J7CR]Z"9*7;IX=@Z=AU8$
M<V=('EJ$N?C8>DV>';`OQF=Q;].O)+PE;(_18V2:4R7\I@U/9L[B_=#LS\8W
M&SXPO7#/,&+AXG&%_%/L"I)Y\0Y19Z/:&5Z_N^@9=E5*),=P\,I!V_%,8NFL
M]K[7P@S/J@)!03IO5-J73OKK1H@?+!-/K62-\L%UFMAZ>V":AV\+E1D&H[,>
M[L;)[!$MF]@-Y+99<A0[87G>112Q:)Z7-W=GN>T/N)84@:\(.':.OM?4R5PQ
M!:V8I7A9!C-ULI@TD4`!X/.M,,X)HJ,,C>79MX/%O*'_4SA@)*P=7?V)OKHX
MF5=.GB[75K%(-;)2>]\],WM?C)S<:/(=E<*/J3GM<H(DCQ,RH_AWMLXR;R,K
M)9VWB\]<NLNA-?GP,?6"WO3P;$=>+'V0OO'G(NX%],TNKEO1=$V!-Y\"PYUX
M3[1ZL=Y#Y#7TFV+C!LT3S9^(W>Y%R_#E4MS-KWMG6RR2I'IL>,:2KT,VYYYO
MW*ERE!P&`XWNS3[GY-DG<Z'X7(9>/-9$@A;3?*C7#-M2;1GW3$64L4G[,J/+
MKL]$[:%DN7!G(2[&D$:)^P`>$F57;#[:>G6<DO5S<UB?_SF[6GG:83W<UC<I
MK-O_("`(C/S_'UL"V?]^;;[K?QN+^QI^Y']@$.3;_,-!<++_;06;MO[7\>?Z
M7Y]]QQ%VTX-J\9KP1,L,^+!FG78&^PUV/Z#OD6DJGFD&Y0"1@)9Y*O_`9,$1
M)0EU#H[6PRI*(%0ZIL_E`"8FDN'IG&A[WZX/@T$U,@4DM,-;OR8**&9'><()
MYI6'NI%)-<$J+F(_0(<";R5SU"552_D/93TI.;[EV?9]PT>C]M">MS/$C_7$
MUO1>/XW#-FFD13:YJC5D3IZWZ\:/U;CF%+I@,%H[1%GR/>73Z]#'NX(]4>9Q
MG@EX-*G<\&!.3C=Q^T7*)T5G:U$<E%IO7BW,+8IKMV5<XLP_8SOZT?BP0XF'
MRU1$!`RCC"84<NH\S1NC%WL8;='+`>A+[#IYJ/O*F$T``2;0:X>+H0IZ@,=P
M&_&SF]2%`EX,]//R+;\4<,Z5>,",\O*G4X@3?,8B3">L;.&+\O?<-B'HTSY1
M:I">0?<YB-G*?_LL#3?EZT-/<$&!S`(*AXUJ&\/*6JA:*YJ*7AZ!&T0K4YC=
M]]5Y*+W'QUD8\-:DVN.6@'E5R:+#_0`OD&H1@454;5L*T^![&GW3.IY$-^?:
MIZPLE;G=G;%#T_CX5O>=#OJ#:?-2=RYZ/&DHN_"H%6FM'^IJS3JR2\2ZBFKP
M=0#+R"YY`%N@X>4/S-Q=I/T//\9N7QTY9"/[&5B?_YW$NKMCG=8['6Q@_0^!
M)/O?ED#VOU^;[_K?QN*^AA_Y'P@)^];_P#"R_VT)F^9_37_Z7[T]NQ*[7*=!
M:],AL=K#RL4%(2&6(O1YKWX'*CGVTY6[C/96?J8M-1L\3&V2_J`D03$8GY(C
MK6<A=G%G-/<D]^D,@4X/4W>DIO4!:KF$F^4=,J27>F5<+!;LE]_.4<3%45/<
MV26WFXLI-#2,&)8Y$<P[>=P9X[;W6+SU\)4<ZI3X:I(UIP47!H1W66YB?4X-
MOZ#+T0`+$I<R9A,RX,$D)HFE?-"*@AN47_5+4[R<*3*2\PQ6VR@IM*_/CV;0
M;X_8'2']'I0N*@VBF<@B'-9VJ-Y3XQTG@)F;Y8'/^Z;$A'A_O\6N<*,FIL?Q
M0>:1YB`"RWD6R:Z,PCL@*H#M9UG]\,I2YK2*-K?MC(#(!.PU<37997'5N#@4
M5_HY&F^:Q)?`(9!*W]18+;J"(<WCC0QMG>R1;)\]KY?FI);%$Q5P.Q:X1OS,
M*D$7!,?:3_DI`%KEWLCD1M?]WECHB+O,L+1`O%EB<M",S3^3-@9ZP^6LP.RQ
M?,$`7GB4`>&]U:'I?`>'^K`,NZ*!?L#L[\7,:;1M;IZU9A:H%*`1F'K`J-PS
MO<N^=!D8M5]N5*\36C01,9`$PF0>\MG.!IB>7+@>(!;P?)XN95[S]5#`-"?S
MO=X]L:)];:MCAFQ^/P_K\S]K.U>W]=\1M`'_@T/([_^U)9#][]?FN_ZWL;BO
MX8?K?^`U^?_R_M]D_]M\-LW_>K_ZG]^_[O^;PD"LHS43J`EFV=RYQJ'BJG:<
MP8*O4#:Z+0)#9G$!+3,"[J,/*UMJ!M/87838E2(E]<5=8)W'G""FFM66$&AW
MC;+CZ",&9GY2TNEW<E/]]0>8NRD!]*Q[*R["4<\8V_TI!^,GCBL=J.6F.N'G
M+D`H%-^I&9V<1W&<MOK#*TBS3*[$6>%DY'BLP90M%^?0_[1S[]]0IW$`Q[\V
M8T;#&'+-;18QLDJA8D)R*9>2$L:E4J-5F'&_M2$-@U5)R=;$6(U:XY(:I,08
M<PQ;KDGCTC0N76A"F]6@6KO.[F_.J9-S<G:WY_4'?'_Z/.>\SW.>SS<,+]WU
MB'R>ZK'VEJ8`CW^HO$Q!EF!NY%RC3X^IK.[`5_<0]5TWG_#*"C)!'>=4=(4X
MKF@)U:\B^M"LNLSYF;7[+8_ZPT3C92'E"?SUD*M1P_W2:#W<0!))<"<V^'!4
M%9>ECI)M%&_7Y$PV'7A%*$1*FVI;^ZQOXP7NE::)SJ`I$<[3`E6;(7_$U.X4
MS'B4R'Z576?$WL;H!,3J'\PQ&1528K*#;,J9LG#_.E\S7LG-#VQTG)T=,VKU
MV1#G)IT,8W'HM6)^?PV_EI=[FQE77!9N%W97,",/L_Z)E]K<<D+HB<-X_?$`
MIRPUNT^YB7PD;,46T\A[M\^-F#\J\^MS@ENA!,X-OR03!KBQQ[)P:7NR-%(O
MS!Z?,(!<R<.V^:>4J)@"J>;($AK&2Z+<U[9^)"'!U)1380#%UYS.QC.L]#`E
M6SL.;8F<GQ_0@O]MG]=_!%(T<8G>_X'^6Q*@_[YN'^V_Q1WW!3YY_[=AP?XO
M>/^W1+Y8_S7_LP]\ED5<88WFLGQIAFIFB/ZP75E:/LD!F8DF:>*I*4DV)D\E
M"^Z*P3RN#L<@\J![/I+^:%AZX7;7?/R+)`?;/QZ;60KZ1-]3AMJPZZ*O'BCL
M=F0:LTC/5>UMIVE7=DA$<):+G4>^$39LJ"V"H*"Q1NW7<G#*-WHP*(95:9%^
M<&H"!6%<R18OY-D'Q*V4AP;Y=O([[DV*791SHFU^-IJHDZU-)UW&RE_,1:9V
M;S(+_M8Q'=<1P?&"OR:J80/5'(L,C+>%)CD6EOSJ-_(RQ10U`<4TI")F)V]1
MF947/63&^46AI>+[4T;@LG2I01F=E4Q>!\.#K<+Q$WD\#CV=D!B`[WFN`H=N
M3,5UB4[*C/$GV-@,#"54-ZMJ<-9&BD#FT/0<FLPLQ3H9Y:U,`PUTIWV[D)30
MKW33O;N^5Q-IY$$[P1,6M['/4A4T3PE[_*,C.8SUW+H*X@;26D-#]YT6:<OU
M,NCT-NM;\`(%/^J[G!V$<\).Z6));M\D,GRRU)WY]+92R.5Q6*H&LC_(A3BX
M=HM$)[N'9W\E?OC]8_7$D:+RUO;8P!88(?,=9"D6HQ\T>8@H!Z%=!VNG7K5.
M'9FS)0MTXB3#%>6TQ^:G!=3>_\WG]5^0WV+N`Q;3?\9@_V-)@/[[NGVT_Q9W
MW!?X=/^9+.@_([#_NR2^6/]Q_^Z_Y"P7)]7Y_\'TMAPEZR@&_B:SJM5SEU<`
MVQU;@4U.DK^FQV8*ZB?CEVT;*<J)1_Q,:=AZ/3F/@35,KZQ2[Y3(_BYM76!5
M)_^X1:K?1GXW_(G?0"Q-T')?2EM+QV%[97ZPT#>=AU))&W6J52!=>((L\LPR
MPXEF[2$A*YNZT6P.2W_I&'@'E:C4KO$VX[3B-;,7^\ENR72--?2C4'/42MV-
M,<IRCHWL-<1+PZI4%H_L=JZO"G40@GI'<URJ>W-AG@0?";4:PX?4-2GPV4WM
MRH53$U8LR2)=G!@"@=7,2]2:&1E^7UJM_,J`H,O5_/UZ&:F4'(^&3\<GVG<M
MJZ^OAWP*\<<^#%>&D/+KN>-*D][]YJA-(IN8)RJ[Z\2A@?%<-;5KZ9JX&HW$
MO&GI)+2V3>T-2'97^-Q@3[#?=!1J'S-M++=V#[H5FE:#=?"Z6R'U(963%G&;
M#T=0U?2F)$;Y-Y$=!L'>!EL9/8B9M^6R,]8]?WW^BGLQY=D;5_5\_6!OU3EU
M>G!QM@DS<SEEV\X!-\9>M`6O:LJ@:**/-N+&@&/B+BG6299+%$@&>[]S>$YY
MYI*CJN58\J#EH&7KCX]@EA0!]T&`1?_\K(#Z`P``````````````````````
5````````````^/?X$XK8@%``H```
`
end

Answer 1

Use vertical-align: top | middle | bottom; vertical-align: top | middle | bottom; in your CSS to align vertically.

Also ensure you use display: inline-block; in your CSS to align to the top / bottom of your images correctly.

Note: You can also use display: inline-flex | inline-grid; display: inline-flex | inline-grid; . See MDN for details of display options.

 body { color: black; }.navaid, .toolbar { font-size: small; font-family: sans-serif; background: #fffab7; margin-top: 1ex; margin-bottom: 1ex; }.nav a { text-decoration: none; }.nav-top.navaid, .nav-top.toolbar { vertical-align: top; display: inline-block; }.nav-middle.navaid, .nav-middle.toolbar { vertical-align: middle; }.nav-bottom.navaid, .nav-bottom.toolbar { vertical-align: bottom; display: inline-grid; }

 <p>Align Top</p> <div class="nav nav-top"> <a title="Erster Eintrag" href="#A0"> <img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" /> </a> <a href="#A0" title="Vorheriger Eintrag"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" /> </a> <span class="navaid">2 von 29</span> <a href="#A2" title="Nächster Eintrag"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" /> </a> <a href="#A28" title="Letzter Eintrag"> <img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" /> </a> </div> <p>Align Middle</p> <div class="nav nav-middle"> <a title="Erster Eintrag" href="#A0"> <img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" /> </a> <a href="#A0" title="Vorheriger Eintrag"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" /> </a> <span class="navaid">2 von 29</span> <a href="#A2" title="Nächster Eintrag"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" /> </a> <a href="#A28" title="Letzter Eintrag"> <img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" /> </a> </div> <p>Align Bottom</p> <div class="nav nav-bottom"> <a title="Erster Eintrag" href="#A0"> <img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" /> </a> <a href="#A0" title="Vorheriger Eintrag"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" /> </a> <span class="navaid">2 von 29</span> <a href="#A2" title="Nächster Eintrag"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" /> </a> <a href="#A28" title="Letzter Eintrag"> <img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" /> </a> </div> <p>Some text</p>

Remove side note concerning frameworks

Answer 2

maybe try adding this to your CSS:

.toolbar{
  margin-bottom: 0;  
}