div 내부의 div를 수직으로 정렬

Question

이 글자를 중간 (또는 상단 또는 하단, 구성 할 수 있음)에 수직으로 "전체 박스"클래스와 정렬해야하는이 fiddle이 있습니다. 문제는 내가 인터넷의 모든 솔루션을 시도하고 아무도 일한 적이 없다는 것이다. 내가 가지고있는 설정과 일부 속성이 다른 것을 재정의하여 내가 원하는 결과를 얻을 수 없기 때문에 상상할 수 없다. 그래서 저는 제 특정한 경우에 묻기로했습니다.

.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

두 가지 옵션이 있습니다. 1. Javascript를 사용하여 사용자의 화면 크기에 따라 div의 위치를 ​​변경하십시오. 2. CSS 사용 주어진 div의 컨테이너에 값을 지정해야합니다 (절대 위치는 이런 식으로 불가능합니다).

Answer 2

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

이 유 달성하려고하는 무엇인가? 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

이 인 flexbox 내가 찾고있는 방법이었다.

감사합니다.

Answer 6

몇 가지 인 flexbox 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; 
}