是否可以垂直对齐流体 div 内的各种流体相对或静态定位元素？答案

【问题标题】：Is it possible to vertically align various fluid relative or static positioned elements inside fluid div?是否可以垂直对齐流体 div 内的各种流体相对或静态定位元素？
【发布时间】：2014-02-18 11:04:57
【问题描述】：

我有这样的代码：

<div id="virtual-studio" class="banner-box">

    <a href="some_url" target="_blank">
        <img src="some.png" alt="some_alt" class="logo">
    </a>

    <div class="banner-text">
        <img src="some.png" alt="" />
    </div>

    <a href="some_url" target="_blank" class="see-more-button">
        <img src="some.png" alt="some_alt" />
    </a>

</div>

以下是此横幅框的样式：

.banner-box {
    display: inline-block;
    width: 26%;
    max-width: 26%;
    min-height: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0 auto;
}

.banner-box a {
    display: block;
    clear: both;
    width: 100%;
    top: 0;
    margin: 0 auto;
    padding: 0;
}

.logo {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
}    

.banner-text {
    display: block;
    clear: both;
    width: 100%;
    margin: 0 auto;
}

.banner-text img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
}

.see-more-button {
    display: block;
    clear: both;
    width: 100%;
    bottom: 0;
    margin: 0 auto;
    padding: 0;
}

.see-more-button img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
}

有三个这样的框，水平对齐 - 左、中、右 - 它们位于名为 #content 的较大框内，该框位于另一个名为 #container 的框内>.

我的整个布局是 100% 流畅的 - 我没有在任何地方使用像素 - 只是百分比。

我想对这三个图像进行结构化，它们将在框内垂直对齐，采用上中下的样式，但甚至不需要使一个元素固定大小。

布局中的每个元素都应具有基于百分比的大小。我使用的图像也应该是流畅的。

这是整个 .html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">

    </head>

    <body>

        <div id="wrapper">

            <div id="header">

                <div>
                    <img src="some.png" alt="some-alt" />
                </div>

            </div>

            <div id="container">

                <div id="content">

                    <div id="virtual-studio" class="banner-box">

                        <a href="some-url.com" target="_blank">
                            <img src="some.png" alt="some-alt" class="logo">
                        </a>

                        <div class="banner-text">
                            <img src="some.png" alt="some-alt" />
                        </div>

                        <a href="some-url.com" target="_blank" class="see-more-button">
                            <img src="some.png" alt="some-alt" />
                        </a>

                    </div>

                    <div id="mu-interactive" class="banner-box">

                        <a href="some-url.com" target="_blank">
                            <img src="some.png" alt="some-alt" class="logo">
                        </a>

                        <div class="banner-text">
                            <img src="some.png" alt="some-alt" />
                        </div>

                        <a href="some-url.com" target="_blank" class="see-more-button">
                            <img src="some.png" alt="some-alt" />
                        </a>

                    </div>

                    <div id="mu-animation" class="banner-box">

                        <a href="some-url.com" target="_blank">
                            <img src="some.png" alt="some-alt" class="logo">
                        </a>

                        <div class="banner-text">
                            <img src="some.png" alt="some-alt" />
                        </div>

                        <a href="some-url.com" target="_blank" class="see-more-button">
                            <img src="see-more.png" alt="some-alt" />
                        </a>

                    </div>

                </div>

                <div id="shadows">
                    <img src="shadows.png" alt="Shadows" />
                </div>

            </div>

            <div id="footer">

                    <img src="footer-line.png" alt="Footer.png" />
                    <div id="contact">
                        <p><span>company</span> co.</p>
                        <p>mail: <span>contact&#64;mail&#46;com</span></p>
                    </div>

            </div>

        </div>

    </body>

</html>

和.css：

/*@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800");
*/

/** { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    /*-moz-box-sizing: border-box; /* Firefox, other Gecko */
    /*box-sizing: border-box; /* Opera/IE 8+ */
/*}*/

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;*/
}

body {
    /*position: relative;*/
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    /*font-size: 15px;*/
    font: 1em 'Open Sans', Arial, Helvetica, sans-serif;
    /*font: "Arial Black", Gadget, sans-serif;*/
}

img {
    max-width: 100%;
    height: auto;
    /*display: block;
    clear: both;
    position: relative;
    margin: 0 auto;*/
}

#wrapper {
    position: absolute;
    margin: 10% 15%;
}

#header {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    height: 24%;
    margin: 0 auto;
    padding: 0 auto;
}

#header div {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;
}

#header img {
    position: relative;
    display: block;
    clear: both;
    /*width: auto;
    height: auto;*/
    margin: 0 auto;
    /*left: 0; right: 0; bottom: 0;*/
}

#container {
    position: relative;
    display: block;
    width: 100%;
    height: 70%;
    margin: 0 auto;
    padding: 7% 0 0 0;
    text-align: center;
}

#content {
    position: relative;
    display: block;
    width: 100%;
    height: 85%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.banner-box {
    /*position: relative;*/
    display: inline-block;
    width: 26%;
    max-width: 26%;
    min-height: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0 auto;
}

.banner-box a {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    /*min-height: 50%;
    height: 50%;*/
    top: 0;
    margin: 0 auto;
    padding: 0;
}

.logo {
    position: relative;
    /*display: inline-block;*/
    display: block;
    clear: both;
    /*width: 100%;
    height: 100%;*/
    margin: 0 auto;
    /*vertical-align: top;*/
}

.logo:hover {
    cursor: pointer;
    height: auto;
    width: auto;
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
}    

.banner-text {
    /*position: relative;*/
    /*display: inline-block;*/
    display: block;
    clear: both;
    width: 100%;
    /*height: 25%;
    min-height: 25%;*/
    margin: 0 auto;
    top: 50%;
    /*padding:  5% 0;
    /*font: 0/0 a;
    vertical-align: middle;*/
}

.banner-text img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
    /*vertical-align: middle;*/
}

.see-more-button {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    /*height: 25%;
    min-height: 25%;*/
    /*vertical-align: bottom;*/
    bottom: 0;
    margin: 0 auto;
    padding: 0;
}

.see-more-button img {
    position: relative;
    display: block;
    clear: both;
    /*width: 100%;
    /*height: 100%;*/
    margin: 0 auto;
    /*font: 0/0 a;*/
}

#virtual-studio {
    /*position: relative;
    display: inline-block;*/
    float: left;
    /*width: 290px;
    margin: 0 auto;*//*margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;*/
}

/*#virtual-studio a {

}

#virtual-studio a img {

}*/


/*#mu-interactive {
    /*position: relative;
    display: inline-block;*/
    /*float: left;*/
    /*width: 290px;
    margin: 0 auto;*//*margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}*/

/*#mu-interactive a {

}

#mu-interactive a img {

}*/

#mu-animation {
    /*position: relative;
    display: inline-block;*/
    float: right;
    /*width: 290px;
    margin: 0 auto;*//*margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;*/
}
/*
#mu-animation a {

}

#mu-animation a img {

}/*

/*#virtual-studio a img:hover, #mu-interactive a img:hover, #mu-animation a img:hover {
    width: 101%;
    height: 101%;
}*/

#shadows {
    /*position: relative;*/
    display: block;
    clear: both;
    width: 100%;
    height: 10%;
    margin: 0 auto;
}

#shadows img {
    position: relative;
    display: block;
    clear: both;
    margin: 0 auto;
    width: 100%;
    /*height: 100%;*/
    /*bottom: 15%;*/
    /*height: 100%;
    top: 0; right: 0; left: 0;*/
}

#footer {
    position: relative;
    display: block;
    clear: both;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 0 0 0;
    /*font-size: 1em;*/
    /*top: 0; right: 0; left: 0;*/
}

#footer img {
    position: relative;
    display: block;
    clear: both;
    width: 95%;
    /*height: auto;*/
    margin: 0 auto;
    /*padding: 2% 0 0 0;
    /*top: 0; right: 0; left: 0;*/
}

#footer #contact {
    position: relative;
    margin: 1% 0 0 0;
}

#footer p {
    display: block;
    clear: both;
    /*position: relative;*/
    margin: 0 auto;
    color: #AFBEA5;
    text-align: center;
    width: auto;
}

#footer span {
    font-weight: bold;
    color: #BDC9AF;
}

@media only screen
and (max-device-width: 320px) {
    html {
    background: url('some-background-320.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 321px)
and (max-device-width: 480px) {
    html {
    background: url('some-background-480.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 481px)
and (max-device-width: 768px) {
    html {
    background: url('some-background-768.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 767px)
and (max-device-width: 1024px) {
    html {
    background: url('some-background-1024.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 1025px)
and (max-device-width: 1680px) {
    html {
    background: url('some-background-1680.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

@media only screen
and (min-device-width: 1681px) {
    html {
    background: url('some-background-1920.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    }
}

我尝试使用 position: absolute; 或更改为 display: table-cell; 但没有任何效果 - 也许我在尝试此操作时在某个地方犯了错误..

将图像定位到绝对位置时，它们会从自己的容器甚至是 #banner-box 容器

中折叠出来

我的主要问题是我不知道如何使页面的每个元素都表现得像固定大小但仍然通过百分比来描述。还有，如何构造这个#banner-box 容器，使其伸展到#content 100% 的高度，然后在#banner-box 内垂直对齐这些图像。

我强烈不希望使用一行 JS，没有框架，并且我的布局 100% 基于百分比，所以这就是我在这个问题上绞尽脑汁的原因。我只想使用 XHTML/CSS2 或 HTML5/CSS3，但要让这个网站在 IE8+ 和现代浏览器上运行。

但是，如果没有任何机会不使用像素，那么哪种网格大小（网站固定大小，而不是像 Bootstrap .etc 这样的网格框架）最适合我？ 960 像素还是 1024 像素？

如果我的简单和愚蠢（可能）但对我来说很难，问题对你来说很烦人，那么干杯和抱歉。

【问题讨论】：

tl:dr，有演示给我们用吗？
通常情况下，您将有更好的机会获得所需的答案并更快地获得答案，方法是让您的代码简洁明了。尝试删除与您的问题发生的部分没有直接关系的任何代码，或尝试制作一个简化的类似代码，为您展示相同的问题。
绝对容器在正常内容流之外，类似于浮动，因此它们崩溃也就不足为奇了。您可能更喜欢不使用任何 JS，但您几乎必须垂直居中。 CSS 中没有万无一失的方法，除非您将其限制在预先确定的约束中。此外，将您的相关代码复制到 jsfiddle，以便人们可以调整您的代码！！！*

标签： css html vertical-alignment fluid-layout

【解决方案1】：

我推荐你阅读本教程：http://tinyurl.com/qb6q78o

特别是托斯卡纳豪华度假村示例，您可以在此处查看：http://cameronmoll.com/projects/book/

这是一个完全流畅的设计，包括图像。我在几天内编写了自己的版本，只有 10 天的 CSS 经验。

【讨论】：