Home > Net >  Align images with text baseline in <div>
Align images with text baseline in <div>

Time:12-07

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

navigation aid rendering

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" ></a> <a href="#A0" title="Vorheriger Eintrag"><img src="/ig16a/go-previous.png" alt="<" ></a> <span >2 von 29</span> <a href="#A2" title="Nächster Eintrag"><img src="/ig16a/go-next.png" alt=">" ></a> <a href="#A28" title="Letzter Eintrag"><img alt=">|" src="/ig16a/go-last.png" ></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'           
  • Related