如何對齊文本中心和右

Question

我在對齊兩個文本時遇到問題，一個在中間，另一個文本在右邊。

我用一個 Div 來對齊它：

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

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

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

    </div>
</div>

當我使用這個時，我的標題向左，它沒有正確地居中對齊，請告訴這是正確的方法還是有其他方法來處理這種情況。

謝謝

Answer 1

如果您希望項目不與布局混淆，請嘗試絕對：

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

Answer 2

您不需要使用 div 來執行此操作，您可以自行設置元素的樣式。 < a > 標簽默認不理解 text-align，因為它是一個內聯元素，所以我把鏈接放在一個段落中，它接受 text-align。 我將這兩行放在一個寬度較小的 <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>

Answer 3

它對我來說很好用。 但是，如果您對h1定位有h1 ，請嘗試將其設置為 block: h1 { display: block; } h1 { display: block; } . 另一方面，如果您想在同一行顯示h1和a ，您只需將右對齊的a放在h1之前。

Answer 4

對於任何使用哈巴狗的人

要快速將鏈接向右對齊，這似乎有效：

html
    head
        style.
            rite {
                font-family: monospace;
                font-size: 10pt;
                text-align: right;
            }

進而 ...

rite
    p
        a(href='/logout' align=right) logout

請注意，這將不起作用：

rite a(href='/logout' align=right) logout

這行不通：

rite
    a(href='/logout' align=right) logout

正如@superUntitled 所解釋的那樣。 來自@superUntitled 的重要提示。