1

我无法垂直居中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; 
}
4

4 回答 4

3

使用这个 CSS：

#child {
    display: table
}
#popup_interstitial_table {
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

并将您的其他 CSS 添加到其中。

请参见垂直居中示例

和 CSS：居中的东西。

于 2012-05-29T00:12:42.760 回答
1

我不知道在不使用表格单元格的情况下垂直居中元素的任何好方法。在这种情况下，它是相当简单的，但你会回到基于表格的布局，我猜你想避免这种情况。

回复问题：元素垂直居中有多重要？

另一种选择是使用 javascript 在渲染时设置边距。

于 2012-05-28T23:54:51.103 回答
1

对于您当前的结构，您有两种解决方案可以使其工作：

1）CSS

用 div 包裹元素并使用这个技巧：

请参阅此工作小提琴示例！（如果您上下移动框架，您会看到目标保持垂直居中。）

#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用 a拉动margin-top:-60px来固定它的位置。负边距是#popup_interstitial_pro_head_text占据的高度。

重要的提示：

因为你有这个结构，为了将修复传递给浏览器，你#popup_interstitial_pro_head_text需要使用一个单元，我选择px了这个例子。

您混合了%多个em声明！

附带说明：

垂直对齐：居中；

你用：

垂直对齐：中间；

请参阅此链接以获取更多信息！

2) 查询

使用 jQuery，您可以收集 所占用的空间#popup_interstitial_table并计算必要的顶部和左侧固定值以使其垂直居中：

请参阅此工作小提琴示例！（如果您上下移动框架，您会看到目标保持垂直居中。）

查询 

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
}

所以，重复一遍，在不改变你当前结构的情况下，这是我能想到的让你的元素居中的两种解决方案！

于 2012-05-29T02:16:13.723 回答
-1

您好，您可以通过两个简单的步骤获得结果：-

只需定义display:table-cell & vertical-align:middle到你的这个 id #popup_interstitial_table

#popup_interstitial_table {
    background-color: #E7E7E7;
    display: table-cell;
    font: 0.85em "Trebuchet MS",Arial,Helvetica,sans-serif;
    height: 300px;
    margin: 5% auto 0;
    vertical-align: middle;
    width: 450px;
}

看演示：- http://jsfiddle.net/D8LLM/34/

于 2012-05-29T05:27:03.967 回答