box1とh_2 a_2を真ん中に表示する方法

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5<meta charset="utf-8">
6<link href="style.css" media="all" rel="stylesheet">
7<title>LAMINA</title>
8</head>
9<body>
10<nav>
11<ul>
12<li>TOP</li>
13<li>ITEMLIST</li>
14<li>BLOG</li>
15<li><img src="image/logo.png" ></li>
16</ul>
17<li><a href="brand.html">BRAND</a></li>
18<li><a href="shop.html">SHOP</a></li>
19<li>CONTACT</li>
20</nav>
21<div class="top">
22<img src="image/top01.jpg">
23</div>
24<div class="h_1">
25<p class="s1">LAMIA blog</p>
26  <div class="box1">
27  <table width="600" cellpadding="5" cellspacing="5"  bgcolor="white">
28 
29 <tr>
30 <td width="33%"><img src="image/top02.jpeg"/></td>
31 <td width="33%"><img src="image/top03.jpeg"/></td>
32 <td width="33%"><img src="image/top04.jpeg"/></td>
33 </tr>
34
35 <tr>
36 <td><span style="background-color:#575757;">the laundress</span></td>
37 <td><span style="background-color:#575757;">ACE TEA LONDON</span></td>
38 <td><span style="background-color:#575757;">MAD etLEN</span></td>
39 </tr>
40
41 <tr>
42 <td>2020/7/11</td>
43 <td>2020/07/06</td>
44 <td>2020/07/03</td>
45 </tr>
46
47 <tr>
48 <td>THE LAUNDRESS ザランドレス</td>
49 <td>ACE TEA LONDON</td>
50 <td>MAD et LEN マドエレン</td>
51 </tr>
52
53</table>
54 </div>
55
56  <div class="more">
57  <p>MORE blog</p>
58  </div>
59</div>
60
61<div class="a_1">
62<p class="s2">LAMINA shop</p>
63<table>
64<td width="33%">
65  <div class="h_2"><img src="image/top05.jpg"/ style="width: 320px; height: 186px;"></div>
66</td>
67<td width="33%">
68
69</td>
70<td width="33%">
71
72</td>
73</table>
74</div>
75
76<hr>
77  <div class="a_2">
78<img src="image/FACEBOOK.png"/ style="width: 30px; height: 30px;">
79<img src="image/twitter.png"/ style="width: 30px; height: 30px;">
80  </div>
81 </div>
82</body>
83</html>
84
85
86
87
88
89

CSS
1top{
2text-align:center;
3
4}
5
6li img{
7width:100px;
8height:auto;
9}
10
11nav ul{
12align-items:center;
13}
14
15nav li{
16float:left;
17}
18
19li{
20list-style:none;
21width:14%;
22text-align: center;
23padding-bottom: 20px;
24}
25
26nav{
27margin:5px;
28}
29
30.s1 {
31color: #444;
32font-size: 24px;
33clear:left;
34display: flex;
35align-items: center;}
36
37.s1:before, .s1:after {
38content: "";
39flex-grow: 1;
40height: 1px;
41background: #444;
42display: block;
43}
44
45.s1:before {
46margin-right: .4em;
47}
48
49s1:after {
50margin-left: .4em;
51}
52
53.h_1{
54background-color:#F2F2F2;
55width:100%;
56height:auto;
57
58span{
59color:white
60}
61
62.box1{
63text-align:center;
64margin-bottom:10px;
65}
66
67table {
68margin-left: auto;
69margin-right: auto;
70margin-bottom:10px;
71}
72
73.gray{
74background-color:#f2f2f2;
75}
76
77.more{
78width:1050px;
79height:40px;
80border:1px solid #333333;
81margin:0 auto;
82}
83
84.more p{
85display:block;
86text-align:center;
87margin:10px auto;
88}
89
90.s2 {
91        display: flex;
92        align-items: center;
93
94    }
95
96.s2:before, .s2:after {
97        content: "";
98        flex-grow: 1;
99        height: 1px;
100        background: #000; 
101        margin:0 .4em; 
102    }
103.a_1{
104text-align:center;
105}
106
107.a_2{
108
109text-align:center;
110}
111
112.brand{
113float:left;
114}
115
116.h_2{
117text-align:center
118}

画像を中央に表示したいけれど、
margin:0 auto;
text-align:center;
では、、真ん中に表示されない。

Lhankor_Mhy

2020/09/04 05:12

「画像」とはどの画像ですか？

newdeal41

2020/09/04 05:19

2番目と3番目とアイコンです。

Lhankor_Mhy

2020/09/04 05:20

「2番目と3番目とアイコン」とは、どれですか？

m.ts10806

2020/09/04 05:29 編集

「top」というタグはHTMLには存在しないですし、自身のHTMLの中にもそういう要素はないですね。

newdeal41

2020/09/04 05:31

適当に付けただけのタグになります。

newdeal41

2020/09/04 05:36

box1とdiv h_2とa_2になります｡

Lhankor_Mhy

2020/09/04 05:42

それらは画像ではないと思いますが……

Lhankor_Mhy

2020/09/04 05:43

なんとなく全部が真ん中にあればいい、みたいな感じかな……？

newdeal41

2020/09/04 05:45

なんと呼べば､いいですかね? 画像が張り付いているから､そうかなと思いました｡

newdeal41

2020/09/04 05:46

そうです｡よろしくお願いします｡

Lhankor_Mhy

2020/09/04 05:46

まあ、ふんわりした感じで問題を把握しました。

newdeal41

2020/09/04 05:48

すみません｡説明が下手すぎですね｡

m.ts10806

2020/09/04 05:57

topというクラスはあるのでそれにあてたいなら .top ですね。さて、質問は編集できるので、具体的に記載してください。

newdeal41

2020/09/04 06:01

TOPのところは直接､text-alignをあててできたのですが､ box1とdiv h_2とa_2を真ん中に表示できないでいます｡よろしくお願いします

m.ts10806

2020/09/04 06:01

質問は編集できるので、質問本文に記載してください。基本的に質問本文のみですよ、読まれるのは。

Lhankor_Mhy

2020/09/11 01:09

質問の編集拝読。 9月4日の私の回答で解決しなかったのであれば、どのような問題が発生しているのかコメントに書いていただければ、なにかアドバイスができるかもしれません。

newdeal41

2020/09/11 01:17

表示を全体的に真ん中に寄せたいのですが、text-alignしても真ん中に表示されない。

Lhankor_Mhy

2020/09/11 01:37

私の回答通り修正してもダメだったということですよね？当方では問題なく表示されています。

Lhankor_Mhy

2020/09/11 01:43

サンプルを作成しました。 https://jsfiddle.net/Lhankor_Mhy/9bnw0hyj/ newdeal41さんの環境では、このページでも真ん中に寄っていないですか？もしそうであれば、環境の問題か、私とnewdeal41さんとの間に「真ん中に寄せる」という状態について認識の齟齬があるのだと思います。

newdeal41

2020/09/11 02:59

ありがとうございました。解決できました。お手数おかけしました。

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

回答3件

自己解決

余分なｃｓｓ決して、margin：０　auto；
で解決できました。
ありがとうございました。

投稿2020/09/11 03:01

newdeal41

総合スコア16

m.ts10806

2020/09/11 03:20

CSSにtop という要素（タグ）に対する指定が残ってますがそれは本当に問題ないのでしょうか。

Lhankor_Mhy

2020/09/11 03:24

> m.ts10806 さん補足依頼でのやり取りを見る限り、質問のコードと実際のコードが異なるんでしょうね…… newdeal41さんの質問はそんなのが多いので。

m.ts10806

2020/09/11 03:29

>質問のコードと実際のコードが異なる一番困るパターンですね。必要な情報を出さない、後出し、間を空けすぎる　アドバイスが無駄になる。他人には書いてあることが全て。

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

topだとタグ<top>
.topだとクラスclass="top"

インラインスタイルとcss混じってるのはどうにかした方がいいですよ。

投稿2020/09/11 01:26

m.ts10806

総合スコア80861

css
1.h_1{
2background-color:#F2F2F2;
3width:100%;
4height:auto;
5/* } を忘れています。*/
6span{
7

投稿2020/09/04 05:57

Lhankor_Mhy

総合スコア36158

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

box1とh_2 a_2を真ん中に表示する方法

関連した質問