如何将文本居中和右对齐

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>

当我使用这个时，我的标题会靠左，不能正确居中对齐，请告诉我这是正确的方法还是有其他方法来处理这种情况。

谢谢。

- Mayur

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>

- Dan Heberden

---

谈论让它变得比必要的更复杂...把它浮动到右边有什么问题吗？至少溢出文本不会在链接后面。 - animuson

因为他正在使用一个居中的元素。这就是为什么http://jsfiddle.net/RYq4F/ -。浮动元素仍然会影响文本.. - Dan Heberden

这不是将标题居中在“header”上，而是在h1宽度上居中！ - droid192

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>

- superUntitled

---

如果他想要把元素放在同一行上，那么他可以将h1元素浮动。 <h1 style="text-align:center;float:left">示例标题</h1> - superUntitled

不，你应该将链接向右浮动。你的主页面内容应该是静态的。 - animuson

Answer 3

对我来说它很好用。 但是如果您在定位h1方面遇到问题，请尝试将其设置为块级元素：h1 { display: block; }。 另一方面，如果您想要在同一行显示h1和a，您只需要将右对齐的a放在h1之前。

- vtambourine

Answer 4

对于任何使用 Pug 的人

要快速将链接靠右对齐，似乎可以使用以下代码：

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的绝佳提示。

- Fattie