Unable to shift a DIV from bottom to middle of parent DIV - html

Question

I am unable to shift DIV with id="pop_ctrl" in the middle of its parent DIV with id="ops". I tried vertical-align:middle but it's not working. This is my HTML:
<div style="float:left;display:inline-block">
<div id="ops" class="utilities_div" data-type="0">
<div style="display: block; color: white; cursor: pointer;" id="pop_ctrl"><i class="fa fa-plus"></i> Add Data</div>
<ul style="display: none; position: relative; top: 0px; left: 0px; background: rgb(128, 0, 0) none repeat scroll 0% 0%; width: 100%; float: left; padding: 0px; border-radius: 10px;" id="demo_ul">
<li style="display: block; color: rgb(255, 255, 255); float: left; text-align: center; border-radius: 10px;" class="demo_li">
<div><i class="fa fa-sort-numeric-asc"></i>
</div>
<div>Number</div>
</li>
</ul>
</div>
</div>
And this is my CSS:
.utilities_div {
display: inline-block;
background-color: black;
}
#demo_ul {
position: absolute !important;
top: 0px;
margin: 0px;
background-color:white;
}
.demo_li {
word-wrap: break-word;
padding: 10px;
background-color: red
}
And this is the fiddle for it: http://jsfiddle.net/4szk1y2d/

Answer 1

Try like this: Demo
#pop_ctrl {
height:44px;
line-height:44px;
vertical-align:middle;
display: block;
color: white;
cursor: pointer;
padding:0 6px;
}
Remove all nbsp's instead use padding

Answer 2

<style>
.utilities_div {
background-color: black;
}
#demo_ul {
position: absolute !important;
top: 0px;
margin: 0px;
background-color:white;
}
.demo_li {
word-wrap: break-word;
padding: 10px;
background-color: red
}
</style>
<div style="float:left; height:auto;">
<div id="ops" class="utilities_div" data-type="0">
<div style="display: initial; color: white; cursor: pointer; padding:5px;" id="pop_ctrl">
<i class="fa fa-plus"></i>Add Data
</div>
<ul style="display: none; position: relative; top: 0px; left: 0px; background: rgb(128, 0, 0) none repeat scroll 0% 0%; width: 100%; float: left; padding: 0px; border-radius: 10px;" id="demo_ul">
<li style="display: block; color: rgb(255, 255, 255); float: left; text-align: center; border-radius: 10px;" class="demo_li">
<div><i class="fa fa-sort-numeric-asc"></i>
</div>
<div>Number</div>
</li>
</ul>
</div>
</div>

Answer 3

make following changes in the CSS:
div#ops { display : table}
div#pop_ctrl {display: table-cell; padding: 10px}
And remove from the html

Answer 4

Try this demo, it might help you.
html
<div id = "mainDiv">
<div id="childDiv"></div>
</div>
css
#mainDiv{
height:300px;
width:300px;
background : yellow;
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#childDiv{
height:100px;
width:100px;
background : red;
display: inline-block;
}
http://jsfiddle.net/pvodtgrk/

Answer 5

remove display: block; from #pop_ctrl and apply display: table-cell; vertical-align works only for elements with proper display property, such as display: inline-block or table-cell.
working code
http://jsfiddle.net/4szk1y2d/1/
add this to Your CSS
#ops {
display: table;
height: 36px;
}
#pop_ctrl {
display: table-cell !important;
vertical-align: middle;
}