ボックス内部のボックスを中央にしたい。

いつもお世話になっております。
件名が大雑把で申し訳ありません。どのように表現するとよいのかわからず、記入しました。

.menu-descriptionの中にmenu-description-innerを作成しました。
その中に、テキストを入力しています。

どうすれば、menu-description-innerを.menu-descriptionの中央に配置できるのか、教えていただきたく質問いたしました。
何卒よろしくお願いいたします。

<section class="menu" id="menu">
        <h2 class="heading">MENU</h2>
        <div class="menu-wrapper">
            <div class="menu-box　flower01">
                <img class="menu-image" src="img/flower01.png" alt="flower01">
                <div class="menu-description">
                    <div class="menu-description-inner">
                        <h2>flowerr01</h2>
                        <p class="menu-text">〇〇〇〇〇<br>〇〇〇〇〇</p>
                    </div>
                </div>
            </div>
            <div class="menu-box flower02">
                <img class="menu-image" src="img/flower02.png" alt="flower02">
                <div class="menu-description">
                    <div class="menu-description-inner">
                    <h2>flower02</h2>
                    <p class="menu-text">〇〇〇〇〇<br>〇〇〇〇〇</p>
                    </div>
                </div>
            </div>
            <div class="menu-box flower03">
                <img class="menu-image" src="img/flower03.png" alt="flower03">
                <div class="menu-description">
                    <div class="menu-description-inner">
                    <h2>flower03</h2>
                        <p class="menu-text">
                        〇〇〇〇〇<br>〇〇〇〇〇</p>
                    </div>
                </div>
            </div>
            <div class="menu-box flower04">
                <img class="menu-image" src="img/flower04.png" alt="flower04">
                <div class="menu-description">
                    <div class="menu-description-inner">
                        <h2>flower04</h2>
                        <p class="menu-text">
                        〇〇〇〇〇<br>〇〇〇〇〇</p>
                    </div>
                </div>
            </div>
        </div>
</section>

css
1.menu-wrapper {
2    display: table;
3    width: 100%;
4    margin-top: 60px;
5    margin-bottom: 0;
6    table-layout: fixed;
7}
8.menu-box{
9    position: relative;
10    display: table-cell;
11}
12.menu-image {
13  display: block;
14  width: 100%;
15  margin: 0 0 60%;
16}
17.menu-description {
18    position: absolute;
19    top: 50%;
20    left: 0;
21    z-index: 1;
22    width: 100%;
23    height: 50%;
24    overflow-y: auto;
25}
26.menu-description-inner {
27    display: table-cell;
28    width: 100%;
29    height: 100%;
30    vertical-align: middle;
31
32}
33.menu-text {
34    display: table-cell;
35    vertical-align: middle;
36    font-size: 1.2rem;
37    line-height: 2;
38}
39.menu-box::after{
40    content: '';
41    position: absolute;
42    top: 50%;
43    left: 0;
44    width: 100%;
45    height: 50%;
46    background: no-repeat;
47    background-size: 100% 100%;
48    opacity: 0.2;
49}
50.menu-box.flower01::after {
51  background-image: url('/img/flower01.png');
52}
53.menu-box.flower02::after {
54  background-image: url('/img/flower02.png');
55}
56.menu-box.flower03::after {
57  background-image: url('/img/flower03.png');
58}
59.menu-box.flower04::after {
60  background-image: url('/img/flower04.png');
61}

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

回答2件

ベストアンサー

見ただけで試してませんが、.menu-descriptionでpositionをabsoluteにしてleftを0にしてるので必ず左寄せになりませんか？
それを真ん中にしたいのでしたら.menu-descriptionのleftを50%から.menu-description-innerのwidthの半分を引いてやる事で真ん中に来ると思います・・・が、.menu-description-innerはwidthを100%にしてるので必ず左寄せになる気がします・・・

構造自体をご自分で理解してますか？
簡単で良いので紙にでも書いてみると良いと思います。

投稿2018/07/11 12:33

landy77

総合スコア1614

35suehiromaru

2018/07/11 13:59

ありがとうございます。構造自体の理解不足が原因ですね…。申し訳ありません。ご助言ありがとうございます！

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

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8"/>
5    <style type="text/css">
6      .out1{
7        border: 1px solid red;
8        display: flex;
9        align-items: center;
10        justify-content: center;
11      }
12      .in1{border: 1px solid red;}
13      .out2{
14        border: 1px solid red;
15        text-align: center;
16      }
17      .in2{border: 1px solid red;}
18      .out3{
19        border: 1px solid red;
20        position: relative;
21        height: 200px;
22      }
23      .in3{
24        border: 1px solid red;
25        position: absolute;
26        width: 25%;
27        top: 0;
28        bottom: 0;
29        left: 0;
30        right: 0;
31        margin: auto;
32      }
33    </style>
34  </head>
35  <body>
36    <section class="menu" id="menu">
37      <h2 class="heading">MENU</h2>
38      <div class="menu-wrapper">
39        <div class="menu-box　flower01">
40          <img class="menu-image" src="img/flower01.png" alt="flower01">
41          <div class="out1">
42            <div class="in1">
43              <h2>ふれっくすぼっくす</h2>
44              <p class="menu-text">flex-box<br>フレックスボックス</p>
45            </div>
46          </div>
47        </div>
48        <div class="menu-box flower02">
49          <img class="menu-image" src="img/flower02.png" alt="flower02">
50          <div class="out2">
51            <div class="in2">
52              <h2>てきすとあらいん</h2>
53              <p class="menu-text">text-align<br>テキストアライン</p>
54            </div>
55          </div>
56        </div>
57        <div class="menu-box flower03">
58          <img class="menu-image" src="img/flower03.png" alt="flower03">
59          <div class="out3">
60            <div class="in3">
61              <h2>ぽじしょん：あぶそりゅーと</h2>
62              <p class="menu-text">position: absolute<br>ポジション：アブソリュート</p>
63            </div>
64          </div>
65        </div>
66      </div>
67    </section>
68  </body>
69</html>

解答を作っている間に解決してしまったみたいですね。
解決して何よりです。
扱いやすいセンタリングの方法を3通りほど置いていきます。
他にも沢山方法はあるので「CSS 中央寄せ」で調べるとハッピーになれるかもしれません。
ちなみに、レイアウトの最中はボーダを付けてやると把握しやすくなるのでお勧めです|ーﾟ)

投稿2018/07/11 14:09