div内のdivを垂直に整列

Question

私はこれをfiddleにしました。ここでは、ボックスを中央（または上部または下部）に垂直に "Wholebox"クラスに合わせる必要があります。問題は、私がインターネット上のソリューションを試していて、何も働かなかったことです。私が持っている設定といくつかのプロパティが他のものよりも優先されているので、私が望む結果は得られません。だから私は私の特定のケースで尋ねることにしました。

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

とき絶対また、それは、.wholeboxは、構成に応じて、position:absoluteまたは相対を持つことができることに注意することが重要だ、周りのプロパティが変更されますので、上部と左にドラッグすることができます。高さは、構成に応じて自動または固定にすることもできます。

#resizableContainerと.showOverlay divのは、私が考えて無視することができますが、私は誰もがCSSについて良い本を知っている場合念のためにそのプロパティのいくつかは、ちなみに作業

から私が望む結果を妨げているそれらを含みますすべてのプロパティ間の互換性の問題は、それはかなり高く評価されるだろう。

事前に感謝します。

Answer 1

2つのオプションがあります。 1. Javascriptを使用して、ユーザーの画面サイズに基づいてdivの位置を変更します。 2. CSSを使用する指定したdivのコンテナに値を割り当てる必要があります（絶対位置はこの方法では不可能です）。

Answer 2

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

uが達成しようとしている何本か？その場合、CSSファイルの.whole-boxクラスにtop: 30%を追加するだけです。

Answer 3

topと.wholeboxで再生してください。トップは0％、センターは26％、ボトムは56％です。

.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

あなたは、CSSが翻訳し使用することができます。 @Sotjinはフレキシボックスは、私が探していた方法だった、提案されているよう

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

Fiddle

Answer 5

：これを試してみてください。

ありがとうございました！

Answer 6

は、いくつかのフレキシボックスhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layoutを試してみてください。この

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