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

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">&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 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/

You may want to have a look at [centering things](http://www.w3.org/Style/Examples/007/center) or [centering in CSS : a complete guide](https://css-tricks.com/centering-css-complete-guide/). Oh, and also, [inline CSS is bad](http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css) — Jeremy Thille, Jun 01 '15 at 09:54
Firstly, it's not clear what you mean by 'move from bottom to the middle' your JSFiddle doesn't help either. Secondly, please use a separate stylesheet for styling. Having endless reams of `style` attributes makes kittens cry. — Rory McCrossan, Jun 01 '15 at 09:54
are you trying to center align the "pop_ctrl" inside "ops" ? — bbh, Jun 01 '15 at 09:55
@JeremyThille thanks for the links. Nice explanation. Will tell you after reading it if problem persists. — Aishwarya Shiva, Jun 01 '15 at 10:01
@RoryMcCrossan yeah I will add them to separate stylesheet. And I want the inner div to display in middle of parent div. Its always sticking to bottom of parent. — Aishwarya Shiva, Jun 01 '15 at 10:03
@bbh yeah horizontally center and vertically middle align. But vertically middle is important for me. — Aishwarya Shiva, Jun 01 '15 at 10:03
A **neater** way of creating this [Fiddle](https://jsfiddle.net/4szk1y2d/3/). — Rohit Vipin Mathews, Jun 01 '15 at 10:05
Check this SO thread [Vertically align inside a div](http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) — bbh, Jun 01 '15 at 10:06
@bbh - you have remove the space between `[]` and `()` to make a link. — Rohit Vipin Mathews, Jun 01 '15 at 10:08

score 1 · Accepted Answer · answered Jun 01 '15 at 10:04

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

answered Jun 01 '15 at 10:04

G.L.P

7,119
5
25
41

Well this is a straight forward answer I think. Thanks a lot. :) – Aishwarya Shiva Jun 01 '15 at 10:26
glad my answer helped you :) – G.L.P Jun 01 '15 at 10:31

score 1 · Answer 2 · answered Jun 01 '15 at 10:16

<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>

score 0 · Answer 3 · answered Jun 01 '15 at 09:57

0

make following changes in the CSS:

div#ops { display : table}
div#pop_ctrl {display: table-cell; padding: 10px}

And remove    from the html

answered Jun 01 '15 at 09:57

Puneet

2,051
9
17

score 0 · Answer 4 · answered Jun 01 '15 at 10:03

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/

score 0 · Answer 5 · answered Jun 01 '15 at 10:05

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;
}

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

5 Answers5