2017-01-03 36 views
6

これまで私にはこれまでに当てはまりませんでした。私はtext-align: centerをあらゆる場所で試してみましたが、すべて動作しません。彼らは垂直に働くが、彼らは水平に働いていない。私はそれを水平と垂直の両方のボックスごとに機能させるようにしています。私はまた、応答性のデザインを持っている割合に固執しようとしているテキストアライメント:センターとアライメントアイテム:センターが水平に動作しない

.boxes { 
 
    height:100%; 
 
} 
 
.box { 
 
    width: 33%; 
 
    height: 20%; 
 
    display: -webkit-flex; 
 
} 
 
.box p { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.box1 { 
 
    background: magenta; 
 
} 
 
.box2 { 
 
    background: cyan; 
 
} 
 
.box3 { 
 
    background: yellow; 
 
} 
 
.box4 { 
 
    background: orange; 
 
} 
 
.box5 { 
 
    background: purple; 
 
} 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="tabletest.css" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
    <div class="boxes"> 
 
     <div class="box box1"><p>Box 1</p></div> 
 
     <div class="box box2"><p>Box 2</p></div> 
 
     <div class="box box3"><p>Box 3</p></div> 
 
     <div class="box box4"><p>Box 4</p></div> 
 
     <div class="box box5"><p>Box 5</p></div> 
 
    </div> 
 
    </body> 
 
</html>

は、これは私のコードです。

EDIT:これは別の投稿と重複しているように見えるかもしれませんが、私の質問はボックスの順番を保ちながらテキストを中央に(縦と横の両方に)直接並べる方法です。

+0

センターのテキストをページに埋め込むには色が必要ですか? –

+0

レオ・ライオンは、可能性のある重複について、そのブロックがどのように垂直に配置できるかについて質問していましたが、私の質問は、私の通常の解決策が機能していないので、テキストをボックスの中央に揃える方法。私はそれがどのように似ているか分かりません。 –

+0

Deepak、色は必ずしもページを埋める必要はありませんが、テキストをボックスの中央に配置したいと思っています。 –

答えて

9

あなたはフレキシボックスを使用して、以下のソリューションを使用することができます。

.boxes { 
 
    height:100%; 
 
} 
 
.box { 
 
    width:33%; 
 
    height:20%; 
 
    display:flex; 
 
    flex-direction:column; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
.box1 { 
 
    background: magenta; 
 
} 
 
.box2 { 
 
    background: cyan; 
 
} 
 
.box3 { 
 
    background: yellow; 
 
} 
 
.box4 { 
 
    background: orange; 
 
} 
 
.box5 { 
 
    background: purple; 
 
} 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
}
<div class="boxes"> 
 
    <div class="box box1"><p>Box 1</p></div> 
 
    <div class="box box2"><p>Box 2</p></div> 
 
    <div class="box box3"><p>Box 3</p></div> 
 
    <div class="box box4"><p>Box 4</p></div> 
 
    <div class="box box5"><p>Box 5</p></div> 
 
</div>

+1

提示されたコードがOPの問題を解決する理由を説明した場合は役に立ちます。 – cstricklan

0

セットの正当化 - コンテンツを:センター;ボックスクラスで。

1

使用この:

.box p { 
    align-items: center; 
    display: block; 
    text-align: center; 
    width: 100%; 
} 
1

は、次のオプションに

.boxes { 
height:100%; 
} 
.box { 
    width: 33%; 
    height: 20%; 
} 
.box p { 
    text-align: center; 
} 
.box1 { 
    background: magenta; 
} 
.box2 { 
    background: cyan; 
} 
.box3 { 
    background: yellow; 
} 
.box4 { 
    background: orange; 
} 
.box5 { 
    background: purple; 
} 
* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    height: 100%; 
} 

注意してみてください:私は、テキスト整列を使用

+0

ありがとうございますが、私は縦と横の両方の中心の配置を探していますが、text-alignは私に水平の中心の配置しか与えません。私は私の答えに答えを見つけました。 –

0

はこれを試してみてくださいALIGN-項目のinsted。

.boxes { 
    height:100%; 
} 
.box { 
    width: 33%; 
    height: 20%; 
    display: -webkit-flex; 
    position: relative; 
} 
.box p { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 
.box1 { 
    background: magenta; 
} 
.box2 { 
    background: cyan; 
} 
.box3 { 
    background: yellow; 
} 
.box4 { 
    background: orange; 
} 
.box5 { 
    background: purple; 
} 
* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    height: 100%; 
} 
+0

ありがとうございますが、動作しているようには見えません。これが表示されます:http://imgur.com/a/cBKlc。私は私の質問への答えを見つけました。 –

関連する問題