0

鉴于我有这个 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;
}

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

4

4 回答 4

0

一种方法是：

  1. 使您的锚成为块元素（显示：块）
  2. 给它一个宽度（即80px）和边距自动
  3. 最后给它一个容器的宽度（即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>
于 2012-07-25T23:58:31.003 回答
0

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

您也可以像现在一样在代码上使用此 CSS：

a {
text-align: center;
display: block;
}
于 2012-07-25T23:59:39.627 回答
0

我发现“align-self” flex 属性有助于在交叉轴上对齐元素。但它只能应用于弹性项目，<a>、<span> 等内联元素不被视为弹性项目。所以我能想到的唯一解决方案是用像 <div> 或 <p> 这样的块级元素包装它并使用“text-align”属性。

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

div a { text-align: center; }

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

于 2012-07-27T10:10:04.313 回答
0

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

话虽如此，如果你打算使用 flexbox，你会很快发现它通常需要额外的 div 包装，所以你现在不妨习惯它。只要你不和他们一起发疯，这不是一件坏事。HTML5 规范甚至谈到了如何将 div 用于演示目的是合适的。因此，当您只需要添加一个时，不要为此感到内疚。

于 2013-08-09T01:38:09.890 回答