Html 如何对齐文本中心和右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3003668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to align text center and right
提问by Mayur
I am facing problem while aligning two text, one in center and other text in right.
我在对齐两个文本时遇到问题，一个在中间，另一个文本在右边。
I used a Div to align it:
我用一个 Div 来对齐它：
<div style="text-align:center">
<h1> Sample Heading</h1>
<div style="float:right; text-align:center">
<a href="#">sample link</a>
</div>
</div>
When I used this my heading comes left, its not a centrally align properly please tell is this the correct way or is there any other way to handle this scenario.
当我使用这个时，我的标题向左，它没有正确地居中对齐，请告诉这是正确的方法还是有其他方法来处理这种情况。
Thanks
谢谢
采纳答案by Dan Heberden
If you want the item to not mess with the layout, try absolute:
如果您希望项目不与布局混淆，请尝试绝对：
<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>
回答by vtambourine
It works fine to me.
But if you have some issues with positioning of h1, try make it block: h1 { display: block; }.
On other hand, if you want to display h1and aat the same line, you just have to put right-aligned abefore h1.
它对我来说很好用。但是，如果您对 的定位有一些问题h1，请尝试使其阻塞：h1 { display: block; }。另一方面，如果你想显示h1和a在同一行，你只需要a在h1.
回答by superUntitled
You do not need to use div's to do this, you can style the elements themselves. The < a > tag by default does not understand text-align, as it is an inline element, so I have placed the link in a paragraph, which accepts text-align. I have placed the two lines in a < div > tag with a small width so it is easy to see what is going on.
您不需要使用 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>
