画像とリンクを中央寄せにしたいのですが・・・。

下記のコードで表示するものを中央寄せにしたいのですがどうすればいいのでしょうか？
centerタグで囲ってもなぜか無理でした

HTML
1<!doctype html>
2<html>
3<head>
4  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
5  <meta charset="utf-8">
6  <title></title>
7  <style>
8    body{
9      margin: 0;
10      padding: 0;
11      height: 2000px;
12    }
13
14    .menu{
15      float: left;
16      margin-left: 10px;
17    }
18
19    .box{
20      clear: both;
21      padding: 0;
22      margin:0;
23      height: 242px;
24    }
25
26    #img1{ background: url('img/topImg1.png') no-repeat; }
27    #img2{ background: url('img/topImg2.png') no-repeat; }
28    #img3{ background: url('img/topImg3.png') no-repeat; }
29
30  </style>
31</head>
32<body>
33  <!--メニューバー-->
34  <div class="menu" id="sample1"><a href="#">Sample1</a></div>
35  <div class="menu" id="sample2"><a href="#">Sample2</a></div>
36  <div class="menu" id="sample3"><a href="#">Sample3</a></div>
37
38  <!--画像格納-->
39  <div class="box" id="img1"></div>
40  <div class="box" id="img2"></div>
41  <div class="box" id="img3"></div>
42
43<script>
44
45
46</script>
47</body>
48
49</html>

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

回答4件

ベストアンサー

ページ全体をセンタリングするには、

<body>～</body>の中に<div>～</div>を挿入して、センタリングすれば良いかと思います。

スタイル部分に"main"を追加してセンタリング指示。

：
    #img3{ background: url('img/topImg3.png') no-repeat; }

    #main{
      margin-left:auto;
      margin-right:auto;
      text-align:left;
      width: 50%;
    }
  </style>

メニューや画像を"DIV"で括り、IDを指定する。

<body>
  <div id="main">
  <!--メニューバー-->
:
  </div>
<script>
</script>
</body>
</html>

投稿2015/12/06 06:51

kurosawa

総合スコア780

cssでやる場合のおすすめはこれ

css
1display: block;
2position: relative;
3text-align: center;
4top: 50%;
5-webkit-transform: translateY(-50%);
6transform: translateY(-50%);

投稿2016/05/24 08:25

KazukiKudo

総合スコア37

スタイルシートだけで何とかする例です。

CSS
1body {
2	margin: 0;
3	padding: 0;
4	height: 2000px;
5	/* 追加 */
6	text-align: center;	
7}
8
9.menu {
10	/*float: left;*/
11	display: inline;
12	margin-left: 10px;
13}
14
15
16.box {
17	clear: both;
18	padding: 0;
19	/*margin:0;*/
20	margin: 0 auto;
21	height: 242px;
22}
23
24#img1 {background: url('img/topImg1.png') no-repeat center;}
25#img2 {background: url('img/topImg2.png') no-repeat center;}
26#img3 {background: url('img/topImg3.png') no-repeat center;}
27

.menuをfloatではなく、インライン要素として表示させた上で、その外側（ここでは、body要素）にtext-alignにcenterを指定して中央寄せする。
また、#img1、#img2および#img3に関しては、background-position属性でセンタリングさせる。
background一括指定の場合は例示のとおり。

こんな感じではどうでしょうか。

###補足

質問とは直接関係ないですが、DOCTYPE宣言は

html
1<!DOCTYPE html>

という風に書きましょう

投稿2015/12/06 07:07

編集2015/12/06 15:21

blackonyx

総合スコア354

何を正解とするのかわからんけど、こういうことでしょうかね。

html
1<!doctype html>
2<html>
3	<head>
4		<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
5		<meta charset="utf-8">
6		<title></title>
7		<style>
8			body{
9				margin: 0;
10				padding: 0;
11				height: 2000px;
12			}
13
14			#wrap{
15				width: 800px;
16				margin: 0 auto;
17			}
18
19			.menu{
20				float: left;
21				margin-left: 10px;
22			}
23			.box{
24				clear: both;
25				padding: 0;
26				margin:0;
27				height: 242px;
28			}
29			#img1{ background: url('img/topImg1.png') no-repeat; }
30			#img2{ background: url('img/topImg2.png') no-repeat; }
31			#img3{ background: url('img/topImg3.png') no-repeat; }
32
33		</style>
34	</head>
35	<body>
36		<div id="wrap">
37			<!--メニューバー-->
38			<div class="menu" id="sample1"><a href="#">Sample1</a></div>
39			<div class="menu" id="sample2"><a href="#">Sample2</a></div>
40			<div class="menu" id="sample3"><a href="#">Sample3</a></div>
41
42			<!--画像格納-->
43			<div class="box" id="img1"></div>
44			<div class="box" id="img2"></div>
45			<div class="box" id="img3"></div>
46		</div>
47
48		<script>
49
50		</script>
51	</body>
52
53</html>