Question

我连续排列了三个元素。最左边是一个按钮，然后在id =＆＃34; slide＆＃34;中有一些图像。然后我有另一个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

使用Bootstrap垂直和水平集中

1 个答案: