即使垂直和水平对齐flexbox

基本上我有三个项目与flexboxes排成一行，但它的工作原理与垂直对齐有一个奇怪的问题。截图： Fiddle Demo即使垂直和水平对齐flexbox

.flex-container { 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    flex-direction: row; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
} 
 

 
.points { 
 
    flex: 1; 
 
    vertical-align: top; 
 
} 
 

 
.p1 { 
 
    align-self: flex-start; 
 
} 
 

 
.p2 { 
 
    align-self: center; 
 
} 
 

 
.p3 { 
 
    align-self: flex-end; 
 
}

<div class="textcenter"> 
 
    <h1>Lorem Ipsum</h1> 
 
    <h4>dolor sit amet, consectetur adipiscing</h4> 
 
</div> 
 

 
<div class="flex-container bg"> 
 
    <div class="points p1 textcenter"> 
 
    <h3>Support for most popular<br>languages and frameworks</h3> 
 
    <p></p> 
 
    </div> 
 

 
    <div class="points p2 textcenter"> 
 
    <h3>Open Source</h3> 
 
    </div> 
 

 
    <div class="points p3 textcenter"> 
 
    <h3>Constantly Growing</h3> 
 
    </div> 
 
</div>

由于提前，迭戈

来源

2017-03-05 Diego Eann

我也有你的榜样，迭戈一个奇怪的问题。无论我尝试多么努力，我都无法检查用于生成该图像的代码。请提供[mcve]，以便我可以帮助你。 –

也许你在最后一个flex孩子的元素上有默认的margin/padding？ –

或'top' +'relative'，一个简单的'
'，一个伪元素，一个'transform'，'line-height'，'align-self'，这个列表继续。我更喜欢考察猜测。花费更少的时间来回答和修复。 –

Revise Fiddle

.flex-container { 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    flex-direction: row; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
    background-color: cadetblue; 
 
} 
 

 
.points { 
 
    flex: 1; 
 
    vertical-align: top; 
 
    text-align: center; 
 
} 
 

 
p1,p2,p3 { 
 
}

<div class="textcenter"> 
 
    <h1>tutorial-db</h1> 
 
    <h4>The Ultimate Coding Recource Database</h4> 
 
</div> 
 

 
<div class="flex-container bg"> 
 
    <div class="points p1 textcenter"> 
 
     <h3>Support for most popular<br>languages and frameworks</h3> 
 
     <p></p> 
 
    </div> 
 

 
    <div class="points p2 textcenter"> 
 
     <h3>Open Source</h3> 
 
    </div> 
 

 
    <div class="points p3 textcenter"> 
 
     <h3>Constantly Growing</h3> 
 
    </div> 
 
</div>

来源

2017-03-06 04:52:22

我希望你不要把这当作批评，但作为一个建议，如果你想改善答案的质量，你可以在[答案]中找到一些很好的一般建议。对于这一点，尤其是*，“试试这个”*答案的类型通常被认为是较低的质量（即使解决方案是正确的），因为它明确表示答案基于猜测/猜测/感觉比实际了解问题。此外，您可以尝试简要解释一下原则：为什么您认为特定的解决方案可行？最好的问候， –

谢谢你@AndreiGheorghiu建议。从不重复这个错误。 –

即使垂直和水平对齐flexbox

回答

相关问题