Search code examples
htmlcssimagetextvertical-alignment

Align images with text baseline in <div>

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" 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&[email protected]: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?\[email protected],;7)0GA5GU1-1VA]=RA"><
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
5````````````^/?X$XK8@%``H```
`
end
Solution

  • Use 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;. 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