divタグの囲みの中の入れ子を左揃えしてdivタグ自体を中央に揃えたい

下記のようなコードがあります（一番下にコードがあります）。プレビューは下記の通りです。

このコードの中で、

HTML
1div.outer {
2    text-align: center;
3}

のところがありますが、これを

HTML
1div.outer {
2    text-align: left;
3}

にすると画像のようになります。

ただ、これをブラウザで表示するときに、左端に来てしまうので、ブラウザの真ん中に来るように調整したいのです。
調整する方法としては、Full HDの場合は

HTML
1div.outer {
2	text-align: left;
3	margin-left:800px;
4}

といった方法もあるのですが、margin-leftを使わずに、ブラウザの幅に関係無く中央に揃えたいのです。

なにかいい方法はありますでしょうか？

HTML
1<style>
2span {
3	display: block;
4}
5
6div.nested {
7	display: inline-block;
8	background-color:#ddd;
9}
10
11div.outer {
12	text-align: center;
13}
14
15div.outer2 {
16
17}
18
19.annai {
20	font-size: 60px;
21	text-align: center;
22	margin-top: 20px;
23}
24
25.annai_detail_1 {
26	font-size: 20px;
27	text-align: left;
28	margin-top: 0px;
29}
30
31.annai_detail_2 {
32	font-size: 12px;
33	text-align: right;
34	margin-top: 20px;
35}
36
37</style>
38
39<div class="outer2">
40	<div class="outer">
41		<div class="nested">
42			<span class="annai_detail_2">静岡県沼津市</span> <span class="annai_detail_1">駿河国</span> <span class="annai">12. 沼津</span>
43		</div>
44	</div>
45	<div class="outer">
46
47		<div class="nested">
48			<span class="annai_detail_2">京都府京都府</span> <span class="annai_detail_1">山城国</span> <span class="annai">54.三条通大橋</span>
49		</div>
50	</div>
51	<div class="outer">
52		<div class="nested">
53			<span class="annai_detail_2">静岡県島田市</span> <span class="annai_detail_1">遠江国</span> <span class="annai">24. 金谷新町</span>
54		</div>
55	</div>
56	<div class="outer">
57		<div class="nested">
58			<span class="annai_detail_2">静岡県静岡市</span> <span class="annai_detail_1">駿河国</span> <span class="annai">15. 蒲原町</span>
59		</div>
60	</div>
61</div>
62

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

回答2件

ベストアンサー

HTML
1<style>
2  .container {
3    display: flex;
4    justify-content: center;
5  }
6
7  span {
8    display: block;
9  }
10
11  div.nested {
12    display: inline-block;
13    background-color: #ddd;
14  }
15
16  div.outer {
17    text-align: left;
18  }
19
20  div.outer2 {}
21
22  .annai {
23    font-size: 60px;
24    text-align: center;
25    margin-top: 20px;
26  }
27
28  .annai_detail_1 {
29    font-size: 20px;
30    text-align: left;
31    margin-top: 0px;
32  }
33
34  .annai_detail_2 {
35    font-size: 12px;
36    text-align: right;
37    margin-top: 20px;
38  }
39</style>
40
41<div class="container">
42  <div class="outer2">
43    <div class="outer">
44      <div class="nested">
45        <span class="annai_detail_2">静岡県沼津市</span> <span class="annai_detail_1">駿河国</span> <span class="annai">12. 沼津</span>
46      </div>
47    </div>
48    <div class="outer">
49
50      <div class="nested">
51        <span class="annai_detail_2">京都府京都府</span> <span class="annai_detail_1">山城国</span> <span class="annai">54.三条通大橋</span>
52      </div>
53    </div>
54    <div class="outer">
55      <div class="nested">
56        <span class="annai_detail_2">静岡県島田市</span> <span class="annai_detail_1">遠江国</span> <span class="annai">24. 金谷新町</span>
57      </div>
58    </div>
59    <div class="outer">
60      <div class="nested">
61        <span class="annai_detail_2">静岡県静岡市</span> <span class="annai_detail_1">駿河国</span> <span class="annai">15. 蒲原町</span>
62      </div>
63    </div>
64  </div>
65</div>

投稿2019/07/16 14:26

root_jp

総合スコア4666

HTML
1<style>
2//ここから
3.container {
4   text-align: center;
5}
6
7.outer2 {
8    display: inline-block;
9    }
10.outer2 > * {
11    text-align: left;
12 }
13//ここまで追加
14
15span {
16    display: block;
17}
18
19div.nested {
20    display: inline-block;
21    background-color:#ddd;
22}
23
24
25div.outer2 {
26
27}
28
29.annai {
30    font-size: 60px;
31    text-align: center;
32    margin-top: 20px;
33}
34
35.annai_detail_1 {
36    font-size: 20px;
37    text-align: left;
38    margin-top: 0px;
39}
40
41.annai_detail_2 {
42    font-size: 12px;
43    text-align: right;
44    margin-top: 20px;
45}
46</style>
47
48<div class="container">
49    <div class="outer2">
50        <div class="outer">
51            <div class="nested">
52                <span class="annai_detail_2">静岡県沼津市</span> <span class="annai_detail_1">駿河国</span> <span class="annai">12. 沼津</span>
53            </div>
54        </div>
55        <div class="outer">
56
57            <div class="nested">
58                <span class="annai_detail_2">京都府京都府</span> <span class="annai_detail_1">山城国</span> <span class="annai">54.三条通大橋</span>
59            </div>
60        </div>
61        <div class="outer">
62            <div class="nested">
63                <span class="annai_detail_2">静岡県島田市</span> <span class="annai_detail_1">遠江国</span> <span class="annai">24. 金谷新町</span>
64            </div>
65        </div>
66        <div class="outer">
67            <div class="nested">
68                <span class="annai_detail_2">静岡県静岡市</span> <span class="annai_detail_1">駿河国</span> <span class="annai">15. 蒲原町</span>
69            </div>
70        </div>
71    </div>
72</div>