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"> <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 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
Post a Comment