使用 Bootstrap 进行 CSS 相对定位和垂直对齐

Question

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

JSF中间代码：

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 类中，但这是引导的东西，所以你可能不想编辑它。也许创建自己的类，这样您就可以直接添加它或将所有 .col-md-offset-2 div 封装在一个可以向下移动的包装器 div 中。