CSS3Flexbox布局模块-当它是flex项时对齐内联级元素

Question

鉴于我已经得到了这个HTML代码:

<div>
    <h2>What is Lorem Ipsum?</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#">Read more</a>
</div>

和CSS:

div {
    display: flex;
    flex-direction: column;
    padding: 1em;
    border: 1px solid #DDD;
    border-radius: 10px;
}

div h2 {
    font-size: 1.2307em;
    text-align: center;
}

div p {
    flex: 1;
    margin: 0.7692em 0;
}

如何设置锚点的样式，使其水平居中？

Answer 1

套装 align-self: center 在 <a> （当然，也有浏览器特定版本的属性）。内联元素确实成为flex项，因此不需要块级包装器 <a>.

话虽这么说，如果你要使用flexbox，你很快就会发现它通常需要额外的包装div，所以你现在不妨习惯它。只要你不跟他们发疯，这并不是一件坏事。HTML5规范甚至谈到如何将div用于表现目的是合适的。所以当你只需要添加一个时，不要对此感到太内疚。

Answer 2

一种方式是：

1. 使锚点成为块元素（显示：块）
2. 给它一个宽度（即80px）和边缘自动
3. 和Findy给它宽到容器（即100％）

   这是css

        div {
           display: flex;
           flex-direction: column;
           padding: 1em;
           border: 1px solid #DDD;
           border-radius: 10px;
           width:100%;
       }
   
       div h2 {
           font-size: 1.2307em;
           text-align: center;
       }
   
       div p {
           flex: 1;
           margin: 0.7692em 0;
       }
   
       div a{
           width:80px;
           margin:auto;
           display: block;
       }
   

   .

   和html

        <div>
            <h2>What is Lorem Ipsum?</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <a href="#">Read more</a>
       </div>
   

   .

Answer 3

具有像段落外的锚漂浮，不良好的标记。您应该将第二段标记放在锚周围，然后将第二段标签置于该段落中。

您现在也可以在您的代码上使用此CSS：

a {
text-align: center;
display: block;
}

.

Answer 4

我发现“align-self”flex属性有助于将元素与轴对齐。但它只能应用于Flex项目和Inline级元素，如，等不被视为Flex项目。因此，我唯一可以考虑的解决方案是用块级元素像

或

一样包装它，并使用“text-aligal”属性。

<div><a href="#">Read more</a></div>

div a { text-align: center; }

.

http://www.w3.org/tr/css3-flexbox/＃align-self