我使用以下方法在css中創建垂直對齊方式.base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative;}.vert-align{ padding-top:50%; height:50%;}并使用以下div結構。<div class="base"> <div class="vert-align"> Content Here </div></div>雖然這似乎適用于這種情況，但我感到驚訝的是，當我增加或減少我的基礎div的寬度時，垂直對齊會突然。我期待當我設置padding-top屬性時，它將填充占父容器高度的百分比，這在我們的情況下是基數，但是上面的50％的值是以百分比計算的。寬度。:(有沒有辦法將填充和/或邊距設置為高度的百分比，而無需使用JavaScript？
3 回答
大話西游666
TA貢獻1817條經驗 獲得超14個贊
的修復程序是肯定的，垂直填充和余量是相對于寬度，但top并bottom 不是。
所以只需將div放在另一個內部，并在內部div中使用類似的東西top:50%（position如果它仍然不起作用，請記住問題）
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
以下是模擬所需行為的兩個選項。不是一般解決方案，但在某些情況下可能有所幫助。這里的垂直間距是根據外部元素的大小而不是其父元素計算的，但是這個大小本身可以相對于父元素，這樣間距也是相對的。
<div id="outer">
<div id="inner">
content
</div>
</div>
第一種選擇：使用偽元素，這里垂直和水平間距都相對于外部。演示
#outer::before, #outer::after {
display: block;
content: "";
height: 10%;
}
#inner {
height: 80%;
margin-left: 10%;
margin-right: 10%;
}
將水平間距移動到外部元素使其相對于外部的父級。演示
#outer {
padding-left: 10%;
padding-right: 10%;
}
第二種選擇：使用絕對定位。演示
#outer {
position: relative;
}
#inner {
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}
qq_遁去的一_1
TA貢獻1725條經驗 獲得超8個贊
回答一個稍微不同的問題：您可以使用vh單位將元素填充到視口的中心：
.centerme {
margin-top: 50vh;
background: red;
}
<div class="centerme">middle</div>
- 3 回答
- 0 關注
- 671 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消