Centralizing vertically and horizontally with Bootstrap - html

Question

I have three elements arranged in a row. The left most is a button, then there's some images in id="slide" and then I have another div. The html looks like:
<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>
The issue is, I have the images in the center but I can't get the two elements on each side to be centralized vertically and horizontally. The CSS looks like:
.color{
height:30px;
width:30px;
margin: 2px;
border-radius: 50%;
}
#drawmenu{
text-align: center;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
The only thing I believe is actually working is the text-align: center
Hopefully the image will explain what I'm looking for. Sorry about the quality. As good as I could get with paint. The grey parts on the sides are offsets.
http://i1028.photobucket.com/albums/y349/oqrgyikf/stackoverflow_zpsf3b6fa31.png
Thank you

Answer 1

add a class to those columns so you can target them more efficiently, and then the following 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