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つの方法はこれです：

  1. アンカーをブロック要素にする（display：block）
  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

段落の外側にそのようにアンカーを浮かせるのは、良いマークアップではありません。アンカーの周りに2番目の段落タグを配置してから、その段落を中央に配置する必要があります。

現在のコードでこのCSSを使用することもできます。

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

「align-self」フレックスプロパティは、要素を交差軸に揃えるのに役立つことがわかりました。ただし、これはフレックスアイテムにのみ適用でき、<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 に答える