我无法垂直放置包含广告类型容器的popup_interstitial_table
。
小提琴是自动解释的:http://jsfiddle.net/NomikOS/D8LLM/
也欢迎使用jQuery解决方案。
HTML:
<div id="popup_interstitial">
<div id="parent">
<div id="popup_interstitial_pro_head_text">
Headline text
</div>
<div id="child">
<div id="popup_interstitial_table">
<div id="popup_interstitial_row2">
<div id="popup_interstitial_title"><?php echo $title; ?></div>
<img id="popup_interstitial_image" src="<?php echo $image; ?>">
<div id="popup_interstitial_description"><?php echo $description; ?></div>
</div>
</div>
</div>
</div>
</div>
相关的CSS代码为:
#popup_interstitial_pro_head_text{
color:#FFF;
font-size: 2em;
font-weight: normal;
text-shadow: 0.05em 0.05em #666;
background-color: #A5CF4C;
width: 100%;
padding-left: 1%;
padding-top: 0.8%;
padding-bottom: 0.8%;
border-top-width: thin;
border-top-style: solid;
border-top-color: #648323;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #759928;
margin-bottom: 2%;
-webkit-box-shadow: 1px 1px 8px #333333;
-moz-box-shadow: 1px 1px 8px #333333;
khtml-box-shadow: 1px 1px 8px #333333;
filter: shadow(color=#333333, direction=135, strength=0);
}
#popup_interstitial {
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color:#FFFFFF;
color:#111;
z-index:9999;
top:0;
left:0;
}
#popup_interstitial_table {
width: 50%;
margin: 0 auto 0 auto;
background-color:#E7E7E7;
padding: 1em 2.2em;
font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 5%;
vertical-align: center;
}
#popup_interstitial_title{
color:#FFF;
font-size: 1.5em;
font-weight: bold;
padding: 0 0 0 0.3em;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #777;
background-color: #888;
border-radius: 0.3em;
}
#popup_interstitial_description{
padding-top: 1.7em;
padding-bottom: 1.2em;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #ccc;
line-height:1.5em;
}
#popup_interstitial_image{
vertical-align: baseline;
margin: 25px 20px 3px 0;
-webkit-box-shadow: 1px 1px 8px #333333;
-moz-box-shadow: 1px 1px 8px #333333;
khtml-box-shadow: 1px 1px 8px #333333;
filter: shadow(color=#333333, direction=135, strength=0);
padding: 4px;
margin-left: 6px;
float: left;
}
这是最重要的:
#parent {position: relative;}
#child {
padding: 0% 0;
margin: 0 auto;
}
最佳答案
对于当前的结构,有两种解决方案可以使它起作用:
1)CSS
用div包裹元素并使用以下技巧:
请参见此working Fiddle示例! (如果上下移动框架,则会看到目标保持垂直居中。)
#childWrap { // the new element, the mentioned wrapper
display: table;
width: 100%;
height: 100%;
}
#child { // your element that needs to be restyled
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}
#popup_interstitial_table { // the element vertically aligned
width: 50%;
margin: -48px auto 0 auto;
}
此处要做的是将包装元素设置为显示为表格,并占据其父元素(
#parent
)的整个宽度和高度。然后,我们可以将
#child
设置为显示为表格单元,并将其内容设置为垂直居中对齐。现在的诀窍是,由于
#parent
还包含另一个需要保留的元素,但其高度已从#popup_interstitial_table
的“中心”计算中移除,因此我们需要使用#popup_interstitial_table
拉动margin-top:-60px
固定其位置。负边距是#popup_interstitial_pro_head_text
占用的高度。重要的提示:
由于具有这种结构,为了将修复程序传递给浏览器,您的
#popup_interstitial_pro_head_text
需要使用单个单元,我为示例选择了px
。您在多个声明中混合了
%
和em
!附带说明:
垂直对齐:居中;垂直对齐
你用:
垂直对齐:中间;
有关更多信息,请参见this link!
2)JQUERY
使用jQuery,您可以收集
#popup_interstitial_table
占用的空间并计算必要的顶部和左侧固定值以使其垂直居中:请参见此working Fiddle示例! (如果上下移动框架,则会看到目标保持垂直居中。)
JQUERY
function center() {
var $target = $('#popup_interstitial_table'),
$header = $('#popup_interstitial_pro_head_text'),
fixTop = ($target.outerHeight(true)/2)-($header.outerHeight(true)/2),
fixLeft = $target.outerWidth(true)/2;
$target.css({
"margin-top": "-" + fixTop + "px",
"margin-left" : "-" + fixLeft + "px"
});
}
$(document).ready(function() {
center();
});
的CSS
为了防止大量的脚本计算,CSS应该对此进行修复:
#parent {
position: relative;
height: 100%; // this was added
}
#child {
padding: 0% 0;
height: 100%; // this was added
}
#popup_interstitial_table {
width: 50%;
margin: 0 auto 0 auto;
background-color:#E7E7E7;
padding: 1em 2.2em;
font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
position: absolute; // this was added
top: 50%; // this was added
left: 50%; // this was added
}
因此,重复一遍,在不更改您当前结构的情况下,这是我想到的两个可以使您的元素居中的解决方案!