Q&A
###前提・実現したいこと
中央揃えにしたい
###発生している問題・エラーメッセージ
中央揃えにできない
###該当のソースコード
<div class="topmanu"> <ul> <li>未経験でも大丈夫？</li> <li>未経験からの勉強法</li> <li>Webデザイナーの仕事</li> </ul> </div>.topmanu{
background-color:#3a3b3c;
height:56px;
width:1000px;
margin:0;
padding:0 420px;
}
.topmanu ul {
display:flex;
margin:0;
padding:0;
}
.topmanu li{
font-family: sans-serif;
color:white;
height:56px;
width:180px;
text-align:middle;
}
###試したこと
text-align
vertical-align
display:inline
display:table```
###補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報
回答1件
0
ベストアンサー
過去の質問にいっぱいあるので参考にしてください。
こちらで表示したもの
html
1<!DOCTYPE HTML> 2<html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .topmanu{ 8 background-color:#3a3b3c; 9 height:56px; 10 width:1000px; 11 margin:0; 12 padding:0 420px; 13 } 14 .topmanu ul { 15 display:flex; 16 margin:0; 17 padding:0; 18 19 } 20 .topmanu li{ 21 font-family: sans-serif; 22 color:white; 23 height:56px; 24 width:180px; 25 vertical-align: middle; /* 上下 */ 26 text-align: center; /* 左右 */ 27 line-height: 56px; /* これがないとvertical-align で設定しても要素に高さがないため視覚的に効果がない*/ 28 } 29 </style> 30 </head> 31 <body> 32 <div class="topmanu"> 33 <ul> 34 <li>未経験でも大丈夫？</li> 35 <li>未経験からの勉強法</li> 36 <li>Webデザイナーの仕事</li> 37 </ul> 38 </div> 39 </body> 40</html>
投稿2017/12/16 08:31
編集2017/12/16 09:54
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/16 09:25
退会済みユーザー
2017/12/16 09:32
2017/12/16 09:41
退会済みユーザー
2017/12/16 09:42
2017/12/16 09:44
退会済みユーザー
2017/12/16 09:47
2017/12/16 09:48
退会済みユーザー
2017/12/16 09:50
2017/12/16 09:52
2017/12/16 09:57