フレックスボックス - 中央のテキスト

私は正方形のフレックスボックスを持っています。それは1つのハイパーリンクで完全に覆われています。フレックスボックス - 中央のテキスト

ここで、フレックスボックスのコンテンツを垂直方向に集中させたいと思います。私は正方形の形状を失うので、

しかし、財産display: tableとプロパティdisplay: table-cell; vertical-align: middleとネストされたdivでdiv要素を使用すると、動作しません。

ulとliの代わりにdivを使用すると、どこでもクリックできるという性質が失われます。

私は赤いボックスの水平方向と垂直方向の中央に整列させるための「テキスト」希望：次のようにあなたの.tile delcarationで

body { 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 
main { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-container { 
 
    width: 100%; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    list-style: none; 
 
    -webkit-padding-start: 0px; 
 
    -webkit-margin-before: 0px; 
 
    -webkit-margin-after: 0px; 
 
} 
 
li { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 50%; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.white { 
 
    background-color: white; 
 
} 
 
.tile:before { 
 
    content: ''; 
 
    float: left; 
 
    padding-top: 100%; 
 
} 
 
.tile { 
 
    text-align: center; 
 
}

<main> 
 
    <div class="flex-container"> 
 
    <ul> 
 
     <li class="red"> 
 
     <a href="/"> 
 
      <div class="tile"> 
 
      Text 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</main>

出典

2017-01-30 Skrodde

余分のdivを削除、およびリンク自体全体の高さをカバーフレックス項目を作成し、その内容を中心に持っています。 – CBroe

main { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: red; 
 
    height: 100%; 
 
}

<main> 
 
    <a href="/"> 
 
    <div class="tile">Text</div> 
 
    </a> 
 
</main>

出典

2017-01-30 15:50:20

を、あなたはフレキシボックスのコードが必要です：

justify-content: center; 
display: flex; 
align-items: center;

LIの宣言は、フレックスボックスのプロパティを使用していないためブロックする必要があります。以下のように

出典

2017-01-30 15:50:19

はあなたのCSSを変更：

は

.tile:before { 
     content: ''; 
     float: left; 
    } 
    .tile { 
     text-align: center; 
     padding-top: 50%; 
     padding-bottom: 50%; 
    }

あなたは正方形の形状を失うことはありませんし、パディングは常にテキストを中心に説明します。

あなたはここでそれをチェックアウトすることができます：

https://plnkr.co/edit/BgPW9exwJpyxHFn5fMBP?p=preview

出典

2017-01-30 15:52:16 FioleNana

私は.tileの:before一部を除去し、aタグ（今クラス-ED click-containerにそれを移動し、それはどこのように感じることはありませんので。

これで正方形のアンカーができたので、縦方向のアライメントトリックを使用してコンテンツを中央揃えにすることができます。この例では、絶対+トラnslateトリック：

body { 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 
main { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
.flex-container { 
 
    width: 100%; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
    list-style: none; 
 
    -webkit-padding-start:0px; 
 
    -webkit-margin-before: 0px; 
 
    -webkit-margin-after: 0px; 
 
} 
 
li { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 50%; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.white { 
 
    background-color: white; 
 
} 
 

 
/* edited code */ 
 
.tile { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.click-container { 
 
    display: block; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.click-container:before{ 
 
    float: left; 
 
    padding-top: 100%; 
 
    content: ""; 
 
}

<body>  
 
    <main> 
 
    <div class="flex-container"> 
 
     <ul> 
 
     <li class="red"> 
 
      <a class="click-container" href="/"> 
 
      <div class="tile"> 
 
       Text 
 
      </div> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </main> 
 
</body>

出典

2017-01-30 16:02:42 AVAVT

フレックスボックス - 中央のテキスト

答えて

関連する問題