これまで私にはこれまでに当てはまりませんでした。私は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:これは別の投稿と重複しているように見えるかもしれませんが、私の質問はボックスの順番を保ちながらテキストを中央に(縦と横の両方に)直接並べる方法です。
センターのテキストをページに埋め込むには色が必要ですか? –
レオ・ライオンは、可能性のある重複について、そのブロックがどのように垂直に配置できるかについて質問していましたが、私の質問は、私の通常の解決策が機能していないので、テキストをボックスの中央に揃える方法。私はそれがどのように似ているか分かりません。 –
Deepak、色は必ずしもページを埋める必要はありませんが、テキストをボックスの中央に配置したいと思っています。 –