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


i unable shift div id="pop_ctrl" in middle of parent div id="ops". tried vertical-align:middle it's not working. html:

<div style="float:left;display:inline-block">     <div id="ops" class="utilities_div" data-type="0">&nbsp;&nbsp;         <div style="display: block; color: white; cursor: pointer;" id="pop_ctrl"><i class="fa fa-plus"></i>&nbsp;&nbsp;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>&nbsp;&nbsp;                 <div>number</div>             </li>         </ul>     </div> </div> 

and 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 fiddle it: http://jsfiddle.net/4szk1y2d/

try this: demo

#pop_ctrl {     height:44px;     line-height:44px;     vertical-align:middle;     display: block;     color: white;     cursor: pointer;     padding:0 6px; } 

remove nbsp's instead use padding


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -