垂直与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的

回答

相关问题