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

一种方式是：

使你的锚成为一个块元素（显示：阻止）
给它一个宽度（即80px）和margin auto
并最终给容器一个宽度（即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 2

让一个像段落之外浮动的锚点不是好标记。您应该在锚点周围放置第二个段落标记，然后将该段落居中。

您现在可以在代码中使用此CSS：

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

Answer 3

我发现“align-self”flex属性有助于在横轴上对齐元素。但它只能应用于弹性项目，并且像＆lt; a＆gt;，＆lt; span＆gt;等内联级元素不被视为弹性项目。因此，我能想到的唯一解决方案是使用像＆lt; div＆gt;这样的块级元素来包装它。或者＆lt; p＆gt;并使用“text-align”属性。

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

div a { text-align: center; }

http://www.w3.org/TR/css3-flexbox/#align-self

Answer 4

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

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

CSS3 Flexbox布局模块 - 当它是弹性项目时对齐内联级元素

4 个答案: