Vertically aligning div inside div

Question

I have this fiddle where I need to align the box with "wholebox" class vertically to the middle (or top, or bottom, it can be configured). The problem is that I've been trying solutions all around internet and none worked, I imagine it's because the configuration I have and that some property is overriding other so the result I want is unobtainable. So I decided just to ask in my specific case.

 .daliBoxSortableContainer { width: 100%; height: 236px; min-height: 35px; text-align: center; line-height: 100%; box-sizing: border-box; position: relative; padding: 0px; border-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; opacity: 1; background-color: red } .wholebox { display: inline-block; position: relative; width: 25%; height: auto; vertical-align: middle; touch-action: none; cursor: inherit; } .selectedBox { background-color: #fff6ec; border: 1px dashed black; color: #555; } .helpersResizable { border: 1px solid #777; background-color: white; z-index: 1; position: absolute; width: 15px; height: 15px; cursor: move; } .boxStyle { width: 100%; height: 100%; position: relative; word-wrap: break-word; overflow: visible; visibility: visible; padding: 0px; background-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; opacity: 1; } .showOverlay { width: 100%; background: black; top: 0; bottom: 0; position: absolute; opacity: 0.4; } 

 <div class="daliBoxSortableContainer"> <div style="display: table; width: 100%; height: 100%;"> <div style="width: 100%; height: 100%; display: table-cell; vertical-align: top;"> <div style="width: 100%; height: 100%; position: relative;"> <div class="wholebox selectedBox"> <div id="resizableContainer" style="visibility: visible;"> <div style="position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box;"></div> <div> <div class="helpersResizable" style="left: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="left: -7.5px; bottom: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; bottom: -7.5px;"></div> </div> </div> <div class="boxStyle"> <div style="width: 100%; height: 100%;"> <div style="width: 100%; margin: 0px; height: 100%;"> <img src="http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png" style="width: 100%; height: 100%;"> </div> </div> </div> <div class="showOverlay" style="visibility: hidden;"></div> </div> </div> </div> </div> </div> 

Also it's important to note that .wholebox can have position:absolute or relative, depending on configuration, when absolute, can be dragged around so top and left properties will change. Height can be auto or fixed, depending on configuration as well.

#resizableContainer and .showOverlay divs can be ignored I think, but I included them just in case some of their properties is preventing the result I want from working

By the way, if anybody knows a good book about CSS and all it's compatibility issues among properties, it'd be pretty much appreciated.

Many thanks in advance.

Answer 1

You have 2 options: 1. Use Javascript to change position of the div based on user's screen size. 2. With CSS You have to assign some value to the containers of the given div(absolute position is impossible this way).

Answer 2

https://jsfiddle.net/402n2w21/3/

Is this what are u trying to achieve? If its that u just need to add top: 30% to your .whole-box class in the CSS file.

Answer 3

Play with top on .wholebox , 0% for top, 26% for center, 56% for bottom.

 .daliBoxSortableContainer { width: 100%; height: 236px; min-height: 35px; text-align: center; line-height: 100%; box-sizing: border-box; position: relative; padding: 0px; border-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; opacity: 1; background-color: red } .wholebox { display: inline-block; position: relative; width: 25%; height: auto; vertical-align: middle; touch-action: none; cursor: inherit; /*top: 0%;*/ top: 26%; /*top: 56%;*/ } .selectedBox { background-color: #fff6ec; border: 1px dashed black; color: #555; } .helpersResizable { border: 1px solid #777; background-color: white; z-index: 1; position: absolute; width: 15px; height: 15px; cursor: move; } .boxStyle { width: 100%; height: 100%; position: relative; word-wrap: break-word; overflow: visible; visibility: visible; padding: 0px; background-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; opacity: 1; } .showOverlay { width: 100%; background: black; top: 0; bottom: 0; position: absolute; opacity: 0.4; } 

 <div class="daliBoxSortableContainer" data-id="sc-1479897411897" id="sc-1479897411897"> <div style="display: table; width: 100%; height: 100%;"> <div style="width: 100%;height: 100%; display: table-cell; vertical-align: top;"> <div style="width: 100%; height: 100%; position: relative;"> <div class="wholebox dndsc-1479897411897 selectedBox" id="box-bo-1479897411907" style=""> <div style="visibility: visible;"> <div style="position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box;"></div> <div> <div class="helpersResizable" style="left: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="left: -7.5px; bottom: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; bottom: -7.5px;"></div> </div> </div> <div class="boxStyle"> <div style="width: 100%; height: 100%;"> <div style="width: 100%; margin: 0px; height: 100%;"> <img src="http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png" style="width: 100%; height: 100%;"> </div> </div> </div> <div class="showOverlay" style="visibility: hidden;"></div> </div> </div> </div> </div> </div> 

Answer 4

You could use CSS translate. Try this:

.selectedBox {
    background-color: #fff6ec;
    border: 1px dashed black;
    color: #555;
    /* --- Added CSS --- */
    transform: translateY(-50%);
    top: 50%;
}

Fiddle

Answer 5

as @Sotjin suggested, Flexbox was the way I was looking for.

Thanks everyone!

Answer 6

try this

demo

css

#container {
    /* essential for alignment */
    height:300px;
    line-height:300px;
    text-align:center;
    /* decoration */
    background:#eee;
}
    #aligned-middle {
        /* essential for alignment */
        vertical-align:middle;
        /* decoration */
        background:#ccc;
        /* perhaps, reapply inherited values, so your content is styled properly */
        line-height:1.5;
        text-align:left;
    }
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
    #container .strut {
        /* parent's height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    /* for IE < 8, should be placed in separate stylesheet, via use of conditional comments */
    *display:inline;
    *zoom:1;
}