CSS3 Flexboxレイアウトモジュール - フレックス項目の場合はインラインレベルの要素を揃えます

StackOverflow https://stackoverflow.com//questions/11659504

  •  11-12-2019
  •  | 
  •  

質問

この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;
}
.

水平方向に集中するようにアンカーをどのようにスタイルすることができますか？

役に立ちましたか？

解決

align-self: center（ブラウザ固有のバージョンのプロパティをもちろん）に<a>を設定します。インライン要素は確かにフレックスアイテムになるので、<a>の周囲のブロックレベルのラッパーは不要です。

言っていると言われているのは、FlexBoxを使用しようとしている場合は、余分なラッピングDIVを必要とすることが多いことをすばやく発見するので、今すぐそこに慣れる可能性があります。あなたが彼らに夢中になっていない限り、これは悪いことではありません。HTML5仕様は、表示目的のためにDIVを使用する方法について話します。だからあなたがただ一つを加えたばかりのときにそれについて罪を犯さないでください。

他のヒント

片道はこれです：

  1. アンカーをブロック要素にします（Display：Block）
  2. 幅（すなわち80px）とマージンauto を与える
  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>
    .

段落の外側のように浮遊したアンカーを持つことはマークアップ性ではありません。あなたはアンカーの周りに2番目の段落タグを置き、その段落を中心にするべきです。

あなたがそれを持っているときにあなたのコードでこのCSSを使うこともできます： 

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top