flexbox内の配置について
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
<ul>
<li>テスト</li>
<li>テストテスト</li>
<li>テストテストテスト</li>
</ul>
<li>テスト</li>
<li>テストテスト</li>
<li>テストテストテスト</li>
</ul>
flexboxを使用して、
文字数の違う場合でもlistの中身を「上下中央揃え」
にする事は可能でしょうか？
ご教授よろしくお願いします。
ct さん
11月07日 02時52分
ctさん、こんにちは。
こんな感じでしょうか。
※上下が中央に揃っているか明確にするため、リスト内の文字に改行を追加しています。
Flexboxはの指定は複雑なものもあるので、本職の私も分らないことがあればしょっちゅうマニュアルをチェックしています。ctさんも、マニュアルを一通りチェックされると良いかもしれませんね。
こんな感じでしょうか。
※上下が中央に揃っているか明確にするため、リスト内の文字に改行を追加しています。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexbox 上下中央揃え</title>
<style>
ul {
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;/* 任意（背景色がある方がわかりやすい為） */
padding: 40px 0;/* 任意（縦方向の中央揃えを確認する為） */
list-style: none;
}
li {
width: 200px;/* 任意 */
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>テスト</li>
<li>テスト<br>テスト</li>
<li>テスト<br>テスト<br>テスト</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>flexbox 上下中央揃え</title>
<style>
ul {
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;/* 任意（背景色がある方がわかりやすい為） */
padding: 40px 0;/* 任意（縦方向の中央揃えを確認する為） */
list-style: none;
}
li {
width: 200px;/* 任意 */
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>テスト</li>
<li>テスト<br>テスト</li>
<li>テスト<br>テスト<br>テスト</li>
</ul>
</body>
</html>
Flexboxはの指定は複雑なものもあるので、本職の私も分らないことがあればしょっちゅうマニュアルをチェックしています。ctさんも、マニュアルを一通りチェックされると良いかもしれませんね。
馬場誠 さん
11月07日 08時06分
