html - Bootstrap 的 CSS 相对定位和垂直对齐

Question

我正在尝试将图像模型转换为 HTML/CSS，并且我正在努力让事物正确定位 - 特别是垂直对齐，以及在调整窗口大小时让事物保持相对位置。

JSFiddle 代码:

http://jsfiddle.net/victorhooi/ZcrCc/

全屏 JSFiddle 输出:

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

我有这个模型:

但如果您查看上面的 JSFiddle，我似乎无法获得打开和关闭的分支，以及中心的类型图像在白框内垂直对齐 - 它们无处不在。

HTML:

<section id="proposal" class="backgroundphotos">
<div class="row">
        <div class="col-md-10 col-md-offset-1 panel panel-default">
            <div class="row">
                <div class="col-md-1 col-md-offset-2">
                    <img src="http://www.victorandalpha.com/images/curly_brackets_open.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_01.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_02.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_03.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_04.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_05.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_06.png" />
                </div>
                <div class="col-md-2">
                    <img src="http://www.victorandalpha.com/images/proposal_07.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_08.png" />
                    <img src="http://www.victorandalpha.com/images/proposal_09.png" />
                </div>
                <div class="col-md-1">
                    <img src="http://www.victorandalpha.com/images/curly_brackets_close.png" />
                </div>
            </div>
        </div>
    </div>
</section>

使用 CSS:

    .backgroundphotos {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: scroll; /* Why does this not carry over? */
        min-height: 800px;

    }

    #proposal {
        background: url(../img/04.jpg) no-repeat center center fixed;
        background-attachment: scroll;
    }

    #proposal > div.row > div > div.row > div {
        position: relative;
        bottom: -90px;
    }

    #proposal > div.row {
        position: relative;
        bottom: -22.500em;
    }

注意:我已经编辑了原始问题，将其拆分为其他 CSS 定位问题的单独问题。相关问题在这里:

CSS Positioning two elements relative to each other, and keeping there during resize

CSS Positioning for Glyphicon-based Navbar that Opens on Hover

Answer 1

当我有更多时间检查其他问题时会编辑我的答案(你可能想考虑将它们作为单独的问题)但是对于你的第一个关于分支的问题你不应该使用 bottom: -90px

    #proposal > div.row > div > div.row > div {
        position: relative;
        bottom: 0px; //changed from -90 to just 0
    } 

分支的格式非常完美，但这样做会使它们向下移动。

但问题是图片对齐正确。我将 bottom: -40px 添加到 .col-md-offset-2 类中，但这是 Bootstrap 的内容，因此您可能不想对其进行编辑。也许创建您自己的类，这样您就可以直接添加它或将所有 .col-md-offset-2 div 封装在一个可以向下移动的包装 div 中。