Html CSS相对定位和带引导的垂直对齐

我正在尝试将一个图像模型转换为HTML/CSS，我正在努力使东西正确定位，特别是垂直对齐，以及在调整窗口大小时使东西保持相对位置

JSIDLE代码：

全屏JSFIDLE输出：

我有这个模型：

但是如果你看上面的JSFIDLE，我似乎无法得到开始和结束分支，以及中间的类型图像在白色框中垂直对齐-它们无处不在

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定位问题的单独问题。相关问题如下：

---

当我有更多的时间来检查其他问题时，P> < /P> < P>将编辑我的答案（你可能想考虑把它们分开）。但是对于你的第一个分支，你不应该使用代码>底部：-90px

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

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

---

但问题是图片对齐正确。我在类

.col-md-offset-2

中添加了

bottom:-40px

，但这是引导程序，所以您可能不想编辑它。也许可以创建自己的类，这样您就可以直接添加它或将所有

.col-md-offset-2

div封装在一个包装器div中，您可以向下移动。

我编辑了JSFIDLE代码，以分别定位分支和排版，但是，它仍然不能很好地处理调整大小的问题——排版部分最终只是彼此重叠。哎呀。。。我明白你的意思。如果你想调整它的大小。。。将其制作成自己的图像，然后将其设置为背景图像可能更容易。这样，当您调整它的大小时，它会适当地缩小它。您是否尝试过简单地将

minwidth

属性添加到

div

s以防止它们重叠？

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