【问题标题】：how to align text center and right如何对齐文本中心和右侧
【发布时间】：2011-03-01 12:38:35
【问题描述】：

我在对齐两个文本时遇到问题，一个居中，另一个居右。

我使用了一个 Div 来对齐它：

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

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

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

    </div>
</div>

当我使用这个时，我的标题向左，它没有正确居中对齐请告诉这是正确的方式还是有任何其他方式来处理这种情况。

谢谢

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

谈论让它变得比它需要的更复杂......让它向右浮动有什么问题？至少溢出文本不会出现在链接后面。
因为他使用的是居中元素。 jsfiddle.net/RYq4F - 这就是为什么。浮动元素仍然会影响文本..

【解决方案2】：

您不需要使用 div 来执行此操作，您可以自行设置元素的样式。标签默认不理解 text-align，因为它是一个内联元素，所以我把链接放在了一个接受 text-align 的段落中。我将这两行放在一个宽度较小的标签中，这样很容易看到发生了什么。

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

【讨论】：

如果他想要元素在一行，那么他可以浮动 h1 元素。
示例标题
不，您应该将链接浮动到右侧。您的主页内容应该是静态的。

【解决方案3】：

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

【讨论】：

【解决方案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 的好建议。

【讨论】：

示例标题

对于使用哈巴狗的人