Html 使浮动div垂直对齐
这是我面临的挑战。我试图让一个div出现在另一个对象后面,并将其居中对齐 这就是我目前的工作: 这就是我想要得到的结果 正如你所看到的,我很接近。我就是不能让它对准中心,把自己放在另一个物体后面 有什么想法吗 HTML:Html 使浮动div垂直对齐,html,css,z-index,vertical-alignment,Html,Css,Z Index,Vertical Alignment,这是我面临的挑战。我试图让一个div出现在另一个对象后面,并将其居中对齐 这就是我目前的工作: 这就是我想要得到的结果 正如你所看到的,我很接近。我就是不能让它对准中心,把自己放在另一个物体后面 有什么想法吗 HTML: 基本上有两种方法进行垂直对齐: 使用表格(使用真正的HTML标记或假CSS显示:表格单元格声明) 使用内联元素(同样,可以是自然内联的真正HTML元素,如,也可以是CSSdisplay:inline block声明) 我认为,它使用display:inline block来大
基本上有两种方法进行垂直对齐:
标记或假CSS显示:表格单元格
声明)
,也可以是CSSdisplay:inline block
声明)display:inline block
来大致获得您想要的内容。请注意,我还翻转了HTML中的两个div
它还使用
*显示:inline;缩放:1代码>黑客使其与IE6/7一起工作我做了一些尝试,但我遇到了float
s和clear
s的问题。@imoda你能发布一个新的小提琴来演示你的尝试吗?还请注意,我去掉了您在#planPrices
上使用的float:right
,这就是我现在正在使用的@伊莫达做到了最好。然而,还有一些问题需要解决。最引人注目的是,如果#planPrices
高于相应的。planprice选项bgy
,则顶部和底部会出现空白。
<div id="banner" class="grid_12">
<div class="bannerBgT"></div>
<div class="bannerBgY">
<div id="planPricingWrapper">
<div id="planPrices">
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
<div class="clear_10px"></div>
<div class="planPrice">
<div class="planPriceX"> </div>
<div class="planPriceR"></div>
<div class="clear"></div>
</div>
</div>
<div id="planPriceOptions">
<div class="planPriceOptionsBgT" id="supremacy"></div>
<div class="planPriceOptionsBgY" id="supremacy">
<div><img src="http://www.patientacquisitionsystem.com/images/plans/pricing_title_supremacy.png" width="183" height="27" alt="Supremacy" id="titleImg" /></div>
<img src="http://www.patientacquisitionsystem.com/images/plans/pricing_plan_supremacy.png" width="146" height="156" alt="" />
<div class="planFeatures"> <b>Includes Gold & Platinum Features Plus:</b>
<ul>
<li>Class 3 Rayhawk Design</li>
<li>Class 3 Content Management</li>
<li>Up to 6 Content Modules</li>
<li>Inclusion in 2 or more directories/portals</li>
<li>Access to Rayhawk brand management services*</li>
<li>Mobile device enabled educational content/videos</li>
<li>Marketing materials deployment system*^</li>
<li>2 hours per month of additional services</li>
</ul>
</div>
</div>
<div class="planPriceOptionsBgB" id="supremacy"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="bannerBgB"></div>
</div>
#planPricingWrapper {
padding: 20px;
}
#planPrices {
float: right;
}
#planPrices * {
z-index: 1;
}
.planPrice > * {
float: left;
}
.planPriceX {
width: 280px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_x.png) repeat-x;
}
.planPriceR {
width: 11px;
height: 131px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_bg_r.png) no-repeat;
}
#planPriceOptions {
z-index: 9999999;
}
.planPriceOptionsBgT, .planPriceOptionsBgB {
width: 614px;
}
.planPriceOptionsBgT#supremacy, .planPriceOptionsBgY#supremacy, .planPriceOptionsBgB#supremacy {
background-color: #181818;
}
.planPriceOptionsBgT {
height: 10px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_t.png) no-repeat;
}
.planPriceOptionsBgY {
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_y.png) repeat-y;
color: #FFF;
text-align: center;
padding: 20px;
width: 574px;
min-height: 250px;
}
.planPriceOptionsBgY #titleImg {
margin-bottom: 10px;
}
.planPriceOptionsBgB {
height: 12px;
background: url(http://www.patientacquisitionsystem.com/images/plans/pricing_plan_bg_b.png) no-repeat;
}
.planFeatures {
display: inline-block;
vertical-align: top;
font-size: 14px;
text-align: left;
list-style: square;
margin-left: 10px;
}
.planFeatures ul {
list-style: square;
}