要素を真ん中寄せ、かつ中身を左寄せにして縦を揃えたい

下記のように、要素を真ん中寄せにしたい。
そして、中身を左寄せにして縦を揃えたいです。

現在は、要素は真ん中寄せになっているのですが、
縦のラインがばらばらになってしまっています。（下記参照）

現在のコードを載せます。

HTML
1<div class="inner">    
2    <div class="index" id="menu">
3          MENU
4        </div>
5
6    <div class="menu_unit">
7      <dl>
8      <dt>Cut</dt>
9      <hr class="hr">
10      <dd>カット ¥5,000</dd>
11      </dl>
12
13
14      <dl>
15        <dt>Color </dt>
16        <hr class="hr">
17        <dd>カラー ¥6,000 <br>
18          リタッチカラー ¥2,000 <br>
19          ポイントカラー ¥2,000</dd>
20        </dl>
21      </div>
22
23      <div class="menu_unit">
24        <dl>
25          <dt>Perm</dt>
26          <hr class="hr">
27          <dd>パーマ ¥6,000<br>
28            ストレートパーマ ¥11,000</dd>
29          </dl>
30
31      
32          <dl>
33            <dt>Other </dt>
34            <hr class="hr">
35            <dd>トリートメント ¥2,000<br>
36              ヘッドスパ ¥3,000 <br>
37              クイックスパ ¥1,000 <br>
38              ヘアセット ¥3,000 <br>
39              メイク ¥2,000</dd>
40            </dl>
41          </div>
42
43
44
45
46 　
47  
48
49
50
51      <p>
52      表示は税抜き価格です。 <br>
53      VISA、Mastercard,PayPay決済可能。<br>
54      シャンプー・ブロー込の価格です。 
55    </p>
56  </div> 
57  
58```CSS
59.hr {
60  width: 100%;
61}
62.menu_unit {
63  display: flex;
64  justify-content: center;
65}
66dl {
67  text-align: left;
68  margin-right: 20px;
69  align-items: flex-start;
70}
71
72よろしくお願いいたします。。

Lhankor_Mhy

2020/05/20 05:26

テーブルでいいのでは……？

yyymmm

2020/05/20 07:23

テーブルだとうまくできなくて.... アドバイスありがとうございました！解決しましたm(_ _)m

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

回答1件

ベストアンサー

HTMLが下記のままでは無理だと思います。

html
1        <dd>カラー ¥6,000 <br>
2          リタッチカラー ¥2,000 <br>
3          ポイントカラー ¥2,000</dd>

例えば、下記のように修正します。

html
1      <dd>
2        <p><span>カラー</span><span>¥6,000</span></p>
3        <p><span>リタッチカラー</span><span>¥2,000 </span></p>
4        <p><span>ポイントカラー</span><span>¥2,000</p>
5      </dd>

そのうえで、CSSを下記のように設定すればどうでしょうか。

css
1.inner {
2  max-width: 900px;
3  margin: 0 auto;
4}
5#menu {
6  text-align: center;
7}
8.hr {
9  width: 100%;
10}
11.menu_unit {
12  width: 100%;
13  display: flex;
14  justify-content: space-between;
15}
16.menu_unit dl {
17  flex: 0 1 45%;
18}
19.menu_unit dd {
20  margin: 0 20px;
21}
22.menu_unit dd p {
23  display: flex;
24  justify-content: space-between;
25}
26.inner > p {
27  text-align: right;
28}