我有這個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一本好書和所有這些都是屬性間的兼容性問題,非常感謝。
非常感謝提前。
嘗試一些Flexbox的https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout – Sojtin
http://howtocenterincss.com/ – pawel
@pawel這個頁面很棒,thx! –