如何垂直集中一个容器div [英] How to center vertically a container div
问题描述
我无法垂直居中放置包含广告类型容器的 popup_interstitial_table 。
小提琴会自动解释： http://jsfiddle.net/NomikOS/D8LLM/
jQuery解决方案也是受欢迎的。
HTML：
< div id =popup_interstitial>
< div id =parent>
< div id =popup_interstitial_pro_head_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_imagesrc =<？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;
背景颜色：＃A5CF4C;
宽度：100％;
padding-left：1％;
padding-top：0.8％;
填充底部：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;
宽度：100％;
身高：100％;
位置：固定;
背景颜色：#FFFFFF;
颜色：＃111;
z-index：9999;
top：0;
剩下：0;
}
#popup_interstitial_table {
width：50％;
保证金：0 auto 0 auto;
背景颜色：＃E7E7E7;
填充：1em 2.2em;
字体：0.85emTrebuchet MS，Arial，Helvetica，sans-serif;
margin-top：5％;
vertical-align：center;
}
#popup_interstitial_title {
color：#FFF;
font-size：1.5em;
font-weight：bold;
填充：0 0 0 0.3em;
border-bottom-width：thin;
border-bottom-style：solid;
border-bottom-color：＃777;
背景颜色：＃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封装元素并使用它技巧：
请参阅工作小提琴例子！ （如果你上下移动框架，你会发现目标保持垂直居中。）
#childWrap {//新元素，提到的包装
display：table;
宽度：100％;
身高：100％;
}
#child {//需要重新定义的元素
display：table-cell;
宽度：100％;
身高：100％;
vertical-align：middle;
}
#popup_interstitial_table {//元素垂直对齐
width：50％;
保证金：-48px auto 0 auto;
}
这里所做的是将包装器元素设置为显示为表格，占据其父母的整个宽度和高度（ #parent ）。
#child 显示为表格单元格，并将其内容设置为在中间垂直对齐。 现在， ，因为 既然你有这个结构，为了传递给浏览器修正，你的 您有 在旁注： 您可以使用： vertical-align：middle; 请参阅 使用jQuery，您可以收集被占用的空间由 JQUERY CSS 所以，不要改变你当前的结构，这是我可以想到的两种解决方案来集中您的元素！ I can't center vertically The fiddle it is autoexplained: http://jsfiddle.net/NomikOS/D8LLM/ jQuery solutions are welcome too. HTML: The related CSS code is: This is the most important:
To your current structure, you have two solutions to make it work: Wrap the elements with a div and use this trick: See this working Fiddle Example! (If you move the frame up and down, you see that the target stays vertically centered.) What is done here is to set the wrapper element to display as a table, occupying the entire width and height of its parent ( Then, we can set the Now the trick, since the Since you have this structure, in order to pass to the browser the fix, your You had a mixture of On a side note: You use: vertical-align: middle; See this link for further information! With jQuery, you can collect the space being occupied by the See this working Fiddle Example! (If you move the frame up and down, you see that the target stays vertically centered.) JQUERY CSS To prevent massive script calculations, the CSS should get fixed to this: So, a repeat that without changing your current structure, this are the two solutions I could think of to center your element! 这篇关于如何垂直集中一个容器div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ #parent 还包含您需要保留的另一个元素，但已将其高度从 #popup_interstitial_table 加上 margin-top：-60px 来修正其立场。负边距是＃popup_interstitial_pro_head_text 占据的高度。
重要提示：
#popup_interstitial_pro_head_text 需要使用一个单元，I'已经选择 px 作为示例。
em 在几个声明中！
Vertical-align：center;
$ b
html＃propdef-vertical-alignrel =nofollow>此链接
2）JQUERY
#popup_interstitial_table 并计算必要的顶部和左侧固定值以保持垂直居中： a href =http://jsfiddle.net/zuul/sU3LZ/ =nofollow>工作小提琴示例！ （如果您上下移动框架，则会看到目标保持垂直居中。）
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 （真）/ 2;
$ target.css（{
margin-top： - + fixTop +px，
margin-left： - + fixLeft + px
}）;
$（document）.ready（function（）{
center（）;
}）;
<为防止大量的脚本计算，CSS应该被固定为：
#parent {
position：relative ;
身高：100％; //添加了
}
#child {
padding：0％0;
身高：100％; //添加了
}
#popup_interstitial_table {
width：50％;
保证金：0 auto 0 auto;
背景颜色：＃E7E7E7;
填充：1em 2.2em;
字体：0.85emTrebuchet MS，Arial，Helvetica，sans-serif;
位置：绝对; //这添加了
top：50％; //添加了
，剩下50％; //这是添加的
}
popup_interstitial_table that contains an ads type container.
<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>
#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
#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 to display as a table-cell, and set its contents to vertical align at the middle.#parent also contains another element that you need to stay put, but have its height removed from the "center" calculations for the #popup_interstitial_table, we need to pull the #popup_interstitial_table with a margin-top:-60px to fix its position. The negative margin is the height that the #popup_interstitial_pro_head_text occupies.Important note:
#popup_interstitial_pro_head_text needs to work with a single unit, I've chosen px for the example.% and em on several declarations!
Vertical-align: center;
2) JQUERY
#popup_interstitial_table and calculate the necessary top and left fix values to keep it vertically centered: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();
});
#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
}
