実現したいこと
大きめの枠線の中の文字を上下左右中心に持ってくる方法を知りたいです。
発生している問題・分からないこと
要素を中心に持ってくる方法を勉強しており、自分なりにコードを書きました。
左右中央に持ってこれましたが、上下中央にできません。
【インライン要素・ブロック要素・インラインブロック要素・フレックスボックス】を習っている最中です。
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Document</title>7 <link rel="stylesheet" href="css\style.css">8</head>9<body>10 11 <div class="food">12 <div class="block">オムレツ</div>13 <div class="block">卵焼き</div>14 <div class="block">ゆで卵</div> 15 </div>16</body>17</html>
css
1@charset "UTF-8";2 3.food{4 display: flex;5 height: 200px;6 justify-content: center;7 8 9}10 11.block{12 border: solid green; 13 width: 150px; 14 height: 200px;15 margin: 20px;16 align-items: center;17 text-align: center;18 }
試したこと・調べたこと
上記の詳細・結果
該当のものがありませんでした。
補足
特になし
0 コメント