2016-11-23 153 views
0

我有這個fiddle我需要將該框與「wholebox」類垂直對齊到中間(或頂部或底部,可以配置)。問題是我一直試圖解決所有的因特網和沒有任何工作,我想這是因爲我有配置和一些屬性重寫其他,所以我想要的結果是無法獲得的。所以我決定在我的具體案例中提問。垂直對齊div中的div

.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一本好書和所有這些都是屬性間的兼容性問題,非常感謝。

非常感謝提前。

+1

嘗試一些Flexbox的https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout – Sojtin

+1

http://howtocenterincss.com/ – pawel

+0

@pawel這個頁面很棒,thx! –

回答

0

你有2個選項: 1.使用Javascript更改div的位置根據用戶的屏幕大小。 2.使用CSS您必須爲給定div的容器指定一些值(絕對位置是不可能的)。

0

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>

0

你可以使用CSS轉換。試試這個:

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

Fiddle

0

爲@Sotjin建議,Flexbox的是我一直在尋找的路上。

謝謝大家!

0

試試這個

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