使用 Bootstrap 进行垂直和水平集中

Question

我将三个元素排成一行。最左边是一个按钮，然后在 id="slide" 中有一些图像，然后我有另一个 div。 html 看起来像：

        <div id="display">
            <div class="row">
                <div class="col-lg-3 col-lg-offset-1">
                    <div id="drawMenu" class="center-block">
                        <button type="button" class="btn btn-lg btn-danger" id="erase">Erase</button>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div id="slide">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div id="colorPicker" class="center-block">
                        <div class="color" id="white"></div>
                        <div class="color" id="yellow"></div>
                        <div class="color" id="green"></div>
                        <div class="color" id="blue"></div>
                        <div class="color" id="red"></div>
                        <div class="color" id="black"></div>
                    </div>
                </div>
            </div>
        </div>

问题是，我有图像在中心，但我无法让每侧的两个元素垂直和水平集中。 CSS 看起来像：

.color{
    height:30px;
    width:30px;
    margin: 2px;
    border-radius: 50%;
}

#drawmenu{
    text-align: center;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

我认为唯一有效的是 text-align: center

希望图片能解释我在寻找什么。对不起质量。尽我所能用油漆。两边的灰色部分是偏移量。

http://i1028.photobucket.com/albums/y349/oqrgyikf/stackoverflow_zpsf3b6fa31.png

谢谢

Answer 1

向这些列添加一个类，以便您可以更有效地定位它们，然后添加以下 CSS：

.row{display:block;}
.vertimid{display:inline-block; vertical-align:middle ; height:auto; min-height:100%;}
.vertimid img{width:100%; height:auto;}

See Bootply here