使用jquery / css精确地垂直对齐sans-serif字体
我试图将sans-serif标题与其他div-Elements中的菜单元素精确对齐，所以基本上这样：
头
ABC
其中A与标题的左端对齐，C与右端对齐。 我使用float来分配-Elements，我计算字体大小以使标题适合div宽度。 问题是我使用的是无衬线字体。 问题在小提琴中得到certificate
http://jsfiddle.net/ksuTQ/2/
HEADER HEADER JScript中
resizeHead("#Hideheader", "#header"); function resizeHead(p1, p2) { var fontsize = parseFloat($(p1).css("font-size")); var spacing = parseFloat($(p1).css("letter-spacing")); var initWidth = $(p1).width(); initWidth = initWidth - spacing; var outWidth = $(p2).width(); var s = outWidth / initWidth; s = fontsize * s; $(p2).css({ "font-size": s }); }
CSS
div.Header { font-family:sans-serif; text-align:justify; white-space: nowrap; } div.menubar { text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; margin-bottom: 0px; position: relative; } div.menubutton_left, div.menubutton_middle, div.menubutton_right { vertical-align: top; display: inline-block; *display: inline; zoom: 1; width:60px; } div.menubutton_left { } div.menubutton_middle { text-align: center; } div.menubutton_right { text-align: right; } .stretch { border: 2px dashed #444; width: 100%; display: inline-block; font-size: 0; line-height: 0 }
如何将A的开头与sans-serif字体的标题的H对齐？
您可以向左侧menubutton div添加margin-left:12px 。
参见演示