无法修复HTML 标记中的定位

概述只是想请求你关于我的标记的帮助,我试图像这个图像一样做： http://prntscr.com/6wrpr3 这是我的标记： <div id="two-box"> <div class="wrapper clearfix"> <div class="column blue"> <div id="circle"> <div id="cont 只是想请求你关于我的标记的帮助,我试图像这个图像一样做：

http://prntscr.com/6wrpr3

这是我的标记：

<div ID="two-Box">   <div >      <div >         <div ID="circle">            <div ID="content">               <h2>ParaLLAX</h2>               <h1>Text</h1>               <h2>ARE COol!</h2>            </div>         </div>      </div>      <div >         <div ID="circle-red">            <h2>LET IT</h2>            <h1>Fade</h1>            <h2>RIGHT Now!</h2>         </div>      </div>   </div></div><div ID="carport">   <div >      <div ID="starynight"></div>      <div ID="car"></div>      <div ID="road"></div>   </div></div>

现在我的CSS：

.wrapper {    wIDth: 90%;    margin: 0 auto;    max-wIDth: 1140px;}.two-Box{    wIDth: 100%;}.column{    wIDth: 50%;    position: relative;    padding: 40px 0;}.blue{    background-color: #3498db;    float: left;}.red{    background-color: #e74c3c;    float: right;}#content{    margin-top: 150px;}.column h2{      color: #fff;      Font-family: 'Lato',sans-serif;      Font-size: 3.5em;      Font-weight: 300;      line-height: 1em;      text-align: center;      margin: 0;}.column h1{      color: #fff;      Font-family: 'Pacifico',sans-serif;      Font-size: 4.2em;       line-height: 0em;       text-align: center;       border-top: 4px solID #fff;       border-bottom: 4px solID #fff;       padding: 40px;       margin: 0;}#circle{    background-color: #3aa3e9;    border-radius: 50%;    wIDth: 450px;    height: 450px;     margin: 0 auto;}#circle-red{    background-color: #f25a4a;    border-radius: 50%;    wIDth: 450px;    height: 450px;     margin: 0 auto;}#road{    background: url('http://arubacontests.com/wp-content/uploads/2015/04/road.jpg') no-repeat center;    wIDth: 1020px;    height: 145px;    display: block;}#car{    background: url('http://arubacontests.com/wp-content/uploads/2015/04/car.png') no-repeat center;    wIDth: 325px;    height: 125;    display: block;    position: absolute;    z-index: 9999;}#starynight{    background: url('http://arubacontests.com/wp-content/uploads/2015/04/starynight.jpg') no-repeat center;    wIDth: 1012px;    height: 768px;    display: block;}

这是Codepen：

让我知道我的标记和CSS上是否有东西我需要修复或向我展示实际的代码.谢谢！

注意：这里的主要问题是元素的定位.假设我希望文本和圆圈对齐并且没有填充.类似的背景和汽车图像他们根本不会对齐.

解决方法 像这样的东西？
http://jsfiddle.net/4kk1fyjg/

我基本上将背景位置设置为覆盖,固定汽车高度(在末尾缺少px)并将包装器位置设置为相对位置,以便根据容器将汽车绝对定位.

让我知道这是否按预期工作.

不确定汽车位置,但您可以调整位置改变右侧或左侧属性

编辑

这个给你：
http://jsfiddle.net/4kk1fyjg/2/

只需将内容包装在另一个div中,将圆形位置设置为相对,将显示为表格,将新包装div设置为表格行,将#content设置为table-cell,然后使表格单元格在中间垂直对齐,应该是它.

总结

以上是内存溢出为你收集整理的无法修复HTML /标记中的定位全部内容，希望文章能够帮你解决无法修复HTML /标记中的定位所遇到的程序开发问题。

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