Question

我有一个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;
}

这实际上，为页脚的顶部创建了一个基本背景，然后将一个子弹叠加到该背景上，这样它就可以覆盖而不会遮挡或弄乱背景。子弹显示在正确的位置，并且文本正确地水平放置，但我无法将其垂直居中。任何帮助将不胜感激，以及任何关于CSS的一般建议，我很新，它给我一个运行我的钱。 Thansk很多！

Answer 1

将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。接下来我们设置   孩子的左右值各占50％，这就是   父母的中心。但是这会将左上角设置为   中心，所以我们没有完成。

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

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

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

css选项2

#parent {position: relative;}

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

使用此方法的想法是尝试获取子元素   通过设置顶部，底部，右侧和左侧来拉伸到所有4个边缘   vales为0.因为我们的子元素小于父元素   它无法到达所有4个边缘。

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

不幸的是，上面的内容不适用于IE7及以下版本   以前的方法，子div内的内容可能会变得太大   导致它被隐藏。

css选项3

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

在上面的CSS中，我在两个元素上设置了顶部和底部填充。   在孩子上设置它将确保孩子的内容   垂直居中并在父母上设置确保整个   孩子在父母中心。

我正在使用相对测量来允许每个div动态增长。   如果其中一个元素或其内容需要设置为   绝对测量然后你需要做一些数学来确保   事情加起来。

例如，如果父亲的身高是400像素，而孩子的身高是100像素   高度我们在顶部和底部都需要150px的填充。

150 + 150 + 100 = 400

除非我们的％值，否则使用％可能会在这种情况下抛弃   相当于150px。

此方法适用于任何地方。缺点是取决于   你可能需要做一些项目的具体细节。但是如果   你正在开发灵活布局的想法   你的测量都是相对的，你可以避免数学。

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

source

如何垂直居中div中的文本，重叠另一个div

1 个答案: