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

kei344

2017/03/04 05:32

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

MASAMI-O

2017/03/04 07:00

コードブロック追加いたしました。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			html,body {
8				width:100%;
9				margin:0;
10				padding: 0;
11			}
12			body > div {
13				width:100%;
14				margin:0;
15				padding: 0;
16				background: #EEE;
17			}
18			ul {
19				width: 80%;
20				margin: 0 auto;
21				padding: 0;
22				background: #DDD;
23			}
24			ul > li {
25				width: 25%;
26				display: inline-block;
27			}
28		</style>
29	</head>
30	<body>
31		<div>
32			<ul>
33				<li>list1</li><li>list2</li><li>list3</li><li>list4</li>
34			</ul>
35		</div>
36	</body>
37</html>