正確對齊我的頁面標題

Question

我確定這是一個愚蠢的簡單問題，但對於HTML，我永遠無法決定獲得理想結果的最佳方法......我只是真的沒有爲網頁編碼切割。

無論如何...我有一個頁面，我需要顯示一個標題，其兩側有兩個鏈接，我需要標題居中，並使用與鏈接不同的字體/樣式。

這是建立我現在有，忽略了一個事實，我只有1個鏈接那麼遠，我需要先制定出第一個再擔心對方一個

<div style="float:left clear:none width:100%"> 
<div style="width:20%"><a href="/queryReport.action?currentFacility=<s:property value="previousFacility"/>">Previous Facility</a></div> 
<div style="width:20%" class="important-center">Facility <s:property value="currentFacility"/></div> 
</div> 

.important-center { 
    font-size:20px; 
    letter-spacing:1px;   
    text-align: center; 
    position:center; 
    padding: 6px; 
    color: #314457; 
} 

問題這是我的鏈接不斷出現在我的頭銜之上。如果任何人都可以給我一些關於如何解決這種情況的指示，我會很感激！

Answer 1

如果你想鏈接到鄰居的標題，用這個

<div style="text-align: center;"> 
    <a href="#">Previous Facility</a> 
    <span class="important-center">Facility</span> 
    <a href="#">Next Facility</a> 
</div> 

如果你想要的鏈接，堅持邊，用這個

<div style="text-align: center;"> 
    <a href="#" style="float: left;">Previous Facility</a> 
    <span class="important-center">Facility</span> 
    <a href="#" style="float: right;">Next Facility</a> 
</div> 

CSS

.important-center { 
    font-size:20px; 
    letter-spacing:1px; 
    padding: 6px; 
    color: #314457; 
} 

請參閱here。

Answer 2

您是否嘗試過使用ul？它應該給你想要的結果。

喜歡的東西：

<div style="float:left; clear:none; width:100%;"> 
<ul> 
    <li><a href="/queryReport.action?currentFacility=<s:property alue="previousFacility"/>">Previous Facility</a></li> 
    <li class="important-center">Facility <s:property value="currentFacility"/></li> 
    <li><a href="/queryReport.action?currentFacility=<s:property alue="nextFacility"/>">NextFacility</a></li> 
</ul> 
</div> 

#navigation { margin: 0px; padding: 0px; list-style: none; } 
#navigation li { padding: 2px; } 

編輯：我認爲melhosseiny有更好的解決方案。