垂直與Flexbox的

相對和絕對定位居中我使用absolute和relative定位爲我.box，但你可以看到似乎文本不喜歡它的top: 100%。垂直與Flexbox的

有人可以解釋爲什麼這是？

如果指定top: 100%時，爲什麼文本（某些文本正在此處）溢出到子元素中？

.box { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    align-items: flex-start; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    border: 1px solid red; 
 
} 
 
.child { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid orange; 
 
} 
 
.childschild { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="box"> 
 
    <div class="child"> 
 
    <img src="dog1.jpg" alt="Picture of a dog" width="250" height="250"> 
 
    <div class="childschild"> 
 
     some text is going here 
 
    </div> 
 
    </div> 
 
    <div class="child">dfd</div> 
 
    <div class="child">dfd</div> 
 
</div>

來源

2016-06-25 Shinji-san

..爲什麼是文本（ '一些文本會在這裏' 文字）蔓延到子元素當指定100％時？

由於已經應用了transform屬性的元素：

.childschild { transform: translate(-50%, -50%); }

這告訴元件轉移其沿x軸的寬度向後50％，其沿着所述高度的50％ y軸。

所以首先你要告訴它是top: 100%。然後你告訴它回溯到其高度的50％，這又回到了.child元素上。您可以刪除transform，它將按預期工作。

試試這個：transform: translateX(-50%);（demo）

一個圖文並茂更完整的解釋可以在這裏找到：

Element will not stay centered, especially when re-sizing screen

來源

2016-06-25 01:53:19

如果我理解正確的話，這可以幫助你..

嘗試使用margin-top: -10px;，它將被10px的減少頂部的空間。您也可以嘗試marign-left,margin-right和margin-bottom。

來源

2016-06-25 01:45:41

的問題是因爲在你transform你申請-50% Y軸，這意味着將減去50%從top:100%，因此，這將是有它，你沒有transform

剛纔所說top:50%要麼你只能申請變換到X軸移除所述Y軸，如由@Michael_B作說明，或以縱向/橫向中心僅有框下面的文本可以使用低於此的代碼：

position: absolute; 
top: 100%; 
right: 0; 
left: 0; 
margin: auto

注：我改變了你的img到background-img（可選）

.box { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    border: 1px solid red; 
 
} 
 
.child { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid orange; 
 
} 
 
.box > div:first-of-type { 
 
    background: url("//dummyimage.com/100x100"); 
 
    position: relative 
 
} 
 
.box > div:first-of-type div { 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    width: 50px; 
 
    text-align:center; 
 
    background:red 
 
}

<div class="box"> 
 
    <div class="child"> 
 
    <div>some text is going here</div> 
 
    </div> 
 
    <div class="child">dfd</div> 
 
    <div class="child">dfd</div> 
 
</div>

來源

2016-06-25 01:47:31 dippas

垂直與Flexbox的

回答

相關問題