水平居中一个元素，并在其右侧放置另一个元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了水平居中一个元素，并在其右侧放置另一个元素相关的知识，希望对你有一定的参考价值。
正如标题所暗示的那样，我试图将一个元素水平居中，并将另一个元素放在它的右边，而不是将两个元素居中。我只想要将两个元素中的一个放在中心，而另一个放在它的右边（在这种情况下在同一条线上）。
以下是我能得到的最接近的，但是两个元素都是居中的，而不是只包含'CENTER'的元素。我希望'CENTER'居中并且'正确'在它的右边：
<div style="text-align:center;">
<div style="display:inline">CENTER</div>
<div style="display:inline">right</div>
</div>
我也尝试过：
<div style="text-align:center;">
<div style="display:inline">CENTER</div>
</div>
<div style="display:inline">right</div>
这会导致带有'right'的元素转到下一行。添加显示：内联到我的div与text-align：center只会消除任何居中。
有没有办法让这种情况发生？有很多关于居中的信息，但似乎没有什么能回答我想要做的事情。
答案
试试这个 - http://jsfiddle.net/dGSDF/2/
#center {
position: relative;
height: 100px;
width: 60%;
margin: auto;
background: beige;
}
#right {
position: absolute;
right: -20%;
/* the div's width */
top: 0;
width: 20%;
background: orange;
height: 100px;
}<div id="center">
CENTER
<div id="right">right</div>
</div>以上是关于水平居中一个元素，并在其右侧放置另一个元素的主要内容，如果未能解决你的问题，请参考以下文章