使用jquery / css精确地垂直对齐sans-serif字体 [英] Vertically align sans-serif font precisely using jquery/css
本文介绍了使用jquery / css精确地垂直对齐sans-serif字体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想将无衬线标题与其他div-Elements中的菜单元素精确对齐,因此基本上是这样:
I'm trying to align a sans-serif headline precisely with menu elements in other div-Elements, so basically this:
标题
ABC
Header
A B C
其中A与标题的左端对齐,C与右端对齐。我使用float分配-Elements,我计算font-size以适应标题到div宽度。问题是,我使用无衬线字体。问题表现在一个小提琴
where A is aligned to the left end of the Header and C to the right end. I use float to distribute the -Elements and I compute the font-size to fit the header into the div width. The problem is that I use a sans-serif font. The problem is demonstrated in a fiddle
<div id="Hideheader" class="Header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">HEADER</div>
<div id="header" class="Header">HEADER</div>
<div id="menubar" class="menubar">
<div class="menubutton_left"><a href="#" id="WorkButton">A</a>
</div>
<div class="menubutton_middle"><a href="#" id="AboutButton">B</a>
</div>
<div class="menubutton_right"><a href="#" id="ContactButton">C</a>
</div> <span class="stretch"></span>
</div>
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
}
推荐答案
您可以添加 margin -left:12px
左侧menubutton div。
You can add margin-left:12px
to left menubutton div.
查看演示
这篇关于使用jquery / css精确地垂直对齐sans-serif字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文