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

我用一个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

如何对齐文本中心和右侧

回答

样本标题

相关问题