我在對齊兩個文本時，一個居中，另一個文本居中右對齊時遇到問題。如何對齊文本中心和右側

我用一個div來對齊：

<div style="text-align:center"> 
    <h1> Sample Heading</h1> 

    <div style="float:right; text-align:center"> 

     <a href="#">sample link</a> 

    </div> 
</div>

當我使用這個我的標題自帶離開，它不是一個集中正確對齊請告訴這是正確的做法或有任何其他的方式來處理這個問題場景。

感謝

來源

2010-06-09 Mayur

它適用於我... – animuson 2010-06-09 07:04:54

如果你想要的項目不與佈局混亂，嘗試絕對：

<div id="header" style="position:relative;text-align:center;"><!-- define relative so child absolute's are based on this elements origin --> 
    <div id="sampleLink" style="position:absolute; top:0px; right:0px; >Link</div> 
    <h1 style="text-align:center;">Heading</h1> 
</div>

來源

2010-06-09 07:09:25

談論讓它變得比它需要的更復雜......將它向右移動有什麼問題？至少那麼溢出文本不會落在鏈接後面。 – animuson 2010-06-09 07:15:47

，因爲他正在使用居中元素。 http://jsfiddle.net/RYq4F/ - 是爲什麼。浮動元素仍然會影響文字。 – 2010-06-09 07:30:38

感謝它的工作，非常感謝 – Mayur 2010-06-09 07:44:09

你並不需要使用div的做到這一點，你可以風格的元素本身。默認情況下，< a>標記不理解文本對齊，因爲它是一個內聯元素，所以我已將該鏈接放在段落中，該段落接受文本對齊。我已將這兩行放在一個寬度很小的< div>標記中，以便查看發生了什麼。

<div style="width:400px;"> 
    <h1 style="text-align:center"> Sample Heading</h1> 
<p style="text-align:right"><a href="#">sample link</a> </p> 
</div>

來源

2010-06-09 07:02:14 superUntitled

但如果他想在一行上的元素... – 2010-06-09 07:12:08

如果他想在一行上的元素，然後他可以浮動h1元素。

樣本標題

– superUntitled 2010-06-09 07:15:37

不，您應該確實將鏈接浮動到右側。您的主頁內容應該是靜態的。 – animuson 2010-06-09 07:17:26

它正常工作，給我。但是，如果您在定位h1時遇到問題，請嘗試將其封鎖：h1 { display: block; }。另一方面，如果要在同一行顯示h1和a，則只需在h1之前放置右對齊的a即可。

來源

2010-06-09 07:17:06 vtambourine

如何對齊文本中心和右側

回答

樣本標題

相關問題