質問編集履歴

1 バックオートを3つ追加しました。

MASAMI-O

MASAMI-O score 15

2017/03/04 15:59  投稿

cssでメニューを作っておりまして、それを中央寄せしたいです。
###前提・実現したいこと
ここに質問したいことを詳細に書いてください
cssでメニューを作っておりまして、それを中央寄せしたいです。
何卒よろしくお願いいたします。
###発生している問題・エラーメッセージ
現在、下記のように記述していますが、メニューが中途半端なところに来てしまいます。
そこで画面の幅に対応して中央寄せしたいです。
.dropmenuにpadding-leftを指定すると見かけ上中央にできますが、画面サイズが変わるとずれてしまうので。
###該当のソースコード
```  
<ul class="dropmenu" id="left-to-right">
                   <li><a href="#news">NEWS</a>
                       
                   </li>
                   <li><a href="#division">DIVISION</a>
                       <ul>
                           <li><a href="#">WEB MEDIA</a></li>
                           <li><a href="#">PRODUCTION</a></li>
                           <li><a href="#">PUBLISHING</a></li>
                           <li><a href="#">FUNDING</a></li>
                       </ul>
                   </li>
                   <li><a href="#about">ABOUT US</a>
                       <ul>
                           <li><a href="#">COMPANY</a></li>
                           <li><a href="#">HISTORY</a></li>
                           <li><a href="#">PROFILE</a></li>
                           <li><a href="#">PRIVACY</a></li>
                       </ul>
                   </li>
                   <li><a href="#">CONTACT</a>
                       <ul>
                           <li><a href="#">MAIL</a></li>
                           <li><a href="#">PHONE</a></li>
                       </ul>
                   </li>
               </ul>
.dropmenu{
 *zoom: 1;
 list-style-type: none;
 margin: 5px auto 30px;
}
.dropmenu:before, .dropmenu:after{
 content: "";
 display: table;
}
.dropmenu:after{
 clear: both;
}
.dropmenu li{
 position: relative;
 width: 20%;
 float: left;
 margin: 0;
 text-align: center;
}
.dropmenu li a{
 display: block;
 margin: 0;
 padding: 15px 0 ;
 background: #16244b;
 color: #ffffff;
 font-size: 24px;
 line-height: 1;
 text-decoration: none;
}
.dropmenu li ul{
 list-style: none;
 position: absolute;
 z-index: 9999;
 top: 100%;
 left: 0;
 margin: 0;
 padding: 0;
}
.dropmenu li ul li{
 padding: 0;
 width:100%
}
.dropmenu li ul li a{
 padding-top: 13px;
 padding-bottom:13px;
 padding-left:13px;
 border-top: 1px solid #a91f27;
 background: #16244b;
 text-align: left;
 font-size: 18px;
 display: block;
}
.dropmenu li:hover > a{
 background: #a91f27;
}
.dropmenu li:active > a{
 background: #a91f27;
}
.dropmenu li a:hover{
 background: #a91f27;
}
.dropmenu li a:active{
 background: #a91f27;
}
#left-to-right ul{
 overflow: hidden;
 width: 0;
 transition: .5s;
}
#left-to-right li:hover ul{
 width: 100%;
}
#left-to-right li:active ul{
 width: 100%;
}
#left-to-right li:hover ul li a{
 white-space: nowrap;
}
#left-to-right li:active ul li a{
 white-space: nowrap;
}
```
###試したこと
とりあえず色々なところにtext-align:center;やmargin:0 auto;を入れてみましたが、
変化がありませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
html css
  • CSS3

    5010 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    9581 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る