垂直對齊精確sans-serif字體使用jQuery/CSS

我想與其他DIV-元素菜單元素精確對齊無襯線標題，所以基本上是這樣的：垂直對齊精確sans-serif字體使用jQuery/CSS

頁眉
ABC

其中A對齊到標題的左端，C對齊右端。我使用float來分發-Elements，並計算字體大小以適應div寬度。問題是我使用sans-serif字體。問題是體現在一個小提琴

<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 
}

如何對準A的開始就用頭中的H爲無襯線字體？

來源

2014-06-27 JoeyD

字母「H」未與「A」對齊。這是你的問題嗎？ –

是的，簡而言之:) – JoeyD

您可以將margin-left:12px添加到左側menubutton div。

查看Demo

來源

2014-06-27 05:48:45 Mayank

但是，這將使其得到修復。有什麼方法可以計算出12px的距離嗎？因爲這個距離也會變成窗口大小調整... – JoeyD

不管你的屏幕尺寸是多少.A總是在H之下，你可以通過移動輸出窗口大小來嘗試它。 – Mayank

是的，它是在它之下，沒錯。我正在尋找的或者是將它與它上面的H對齊，即使我更改了標題的字體大小 – JoeyD

垂直對齊精確sans-serif字體使用jQuery/CSS

回答

相關問題