我将三个元素排成一行。最左边是一个按钮,然后在 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
谢谢
最佳答案
向这些列添加一个类,以便您可以更有效地定位它们,然后添加以下 CSS:
.row{display:block;}
.vertimid{display:inline-block; vertical-align:middle ; height:auto; min-height:100%;}
.vertimid img{width:100%; height:auto;}
关于html - 使用 Bootstrap 垂直和水平集中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25901369/