0

我有一个CSS问题。我试图将文本垂直居中放在一个覆盖另一个 div 的 div 中，但文本不会移动。

编辑：这是 JSFiddle 网址：http: //jsfiddle.net/wgSEw/3/

html如下：

<div id="footer-top">
            <div id="footer-top-left">
                <div id="footer-logo">
            </div>
            </div>
            <div id="footer-top-transition"></div>

        <div id="footer-top-right"></div>
        <div id="footer-top-bullets">
            <div id="site-map" class="footer-bullet">
                <img src="<?php echo BASE_IMG_URL . 'bulletlight.png'; ?>" alt="some_text">
                <span class="footer-bullet-text">Site Map</span>
            </div>
            <div id="report-issue" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletlight.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Report an Issue</span>
            </div>
            <div id="submit-professor" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Submit Professor</span>
            </div>
            <div id="submit-school" class="footer-bullet">
                <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
                <span class="footer-bullet-text">Submit a School</span>
            </div> 
        </div>
</div>

当前的CSS是：

#footer-top{
    position: relative;
    width: 960px;
    height: 63px;
    float: left;
    background-image:url('midtilefooter.png');
}

#footer-top-left{
    width: 466px;
    height: 63px;
    float: left;
}

#footer-logo{
    width: 265px;
    height: 63px;
    float: left;
    background-image:url('leftlogo.png');
}

#footer-top-transition{
    width: 27px;
    height: 63px;
    float: left;
    background-image: url('midblacktransition.png');
}

#footer-top-right{
    width: 467px;
    height: 63px;
    float: left;
    background-color: black;
}

#footer-top-bullets{
    position: absolute;
    float: left;
    width: 960px;
    height: 63px; 
    margin-left: 265px;
}

.footer-bullet{
    float: left;
    height: 63px;
    width: 173px;
    color: white;
}

.footer-bullet-text{
    height: 63px;
    color: white;
    top: 50%;
    margin-top: -31px;
    vertical-align: middle;
}

这实质上是为页脚的顶部创建一个基本背景，然后在该背景上覆盖一个项目符号 div，这样它就不会模糊或弄乱背景。项目符号显示在正确的位置，文本正确水平放置，但我根本无法让它垂直居中。任何帮助以及关于 css 的任何一般性建议都将不胜感激，我对它很陌生，它让我为我的钱奔波。非常感谢！

4

1 回答 1

2

使 div 垂直居中

html

 <div id="parent">
        <div id="child">Content here</div>
    </div>

CSS选项1

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

我们首先定位父 div 和子 div。接下来我们将孩子的 top 和 left 值分别设置为 50%，这将是 parent 的中心。然而，这将左上角设置在中心，所以我们还没有完成。

我们需要将子元素向上（高度的一半）和向左（宽度的一半）移动，因此它的中心位于父元素的中心。这就是为什么我们需要知道子元素的高度（这里是宽度）。

为此，我们给元素一个负的上边距和左边距，等于其高度和宽度的一半。

与前两种方法不同，这个方法适用于块级元素。它确实适用于所有浏览器，但是内容可能会超出其容器，在这种情况下它会在视觉上消失。当您知道元素的高度和宽度时，它会工作得最好。

CSS 选项 2

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

这种方法的想法是通过将顶部、底部、右侧和左侧的值设置为 0 来尝试让子元素伸展到所有 4 条边。因为我们的子元素比父元素小，所以它无法到达所有边4个边。

然而，将 auto 设置为所有 4 个边的边距会导致相反的边距相等，并将我们的子 div 显示在父 div 的中心。

不幸的是，上述方法在 IE7 及更低版本中不起作用，并且与之前的方法一样，子 div 内的内容可能会变得太大，导致它被隐藏。

css 选项 3

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

在上面的 css 中，我在两个元素上设置了顶部和底部填充。将其设置在子项上将确保子项中的内容垂直居中，将其设置在父项上可确保整个子项在父项中居中。

我正在使用相对测量来允许每个 div 动态增长。如果其中一个元素或其内容需要使用绝对测量值进行设置，那么您需要进行一些数学运算以确保事情相加。

例如，如果父项的高度为 400 像素，子项的高度为 100 像素，我们需要在顶部和底部都有 150 像素的填充。

150 + 150 + 100 = 400

除非我们的 % 值正好对应于 150 像素，否则在这种情况下使用 % 可能会出错。

这种方法适用于任何地方。不利的一面是，根据您项目的具体情况，您可能需要做一些数学运算。但是，如果您符合开发灵活布局的想法，其中您的测量都是相对的，您可以避免数学。

注意：此方法通过在外部元素上设置填充来工作。您可以翻转事物，而是在内部元素上设置相等的边距。我倾向于使用填充，但我也成功地使用了边距。您选择哪一种取决于您的项目的具体情况。

来源

于 2012-12-28T04:03:16.397 回答