html – 水平居中一个元素,并在其右侧放置另一个元素

概述正如标题所暗示的那样,我试图将一个元素水平居中,并将另一个元素放在它的右边,而不是将两个元素居中.我只想要将两个元素中的一个放在中心,而另一个放在它的右边(在这种情况下在同一条线上). 以下是我能得到的最接近的,但是两个元素都是居中的,而不是只包含’CENTER’的元素.我希望’CENTER’居中并且’正确’在它的右边： <div style="text-align:center;"> < 正如标题所暗示的那样,我试图将一个元素水平居中,并将另一个元素放在它的右边,而不是将两个元素居中.我只想要将两个元素中的一个放在中心,而另一个放在它的右边(在这种情况下在同一条线上).

以下是我能得到的最接近的,但是两个元素都是居中的,而不是只包含’CENTER’的元素.我希望’CENTER’居中并且’正确’在它的右边：

<div >    <div >CENTER</div>    <div >right</div></div>

我也尝试过：

<div >    <div >CENTER</div></div><div >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>

总结

以上是内存溢出为你收集整理的html – 水平居中一个元素,并在其右侧放置另一个元素全部内容，希望文章能够帮你解决html – 水平居中一个元素,并在其右侧放置另一个元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。