footer内の要素を中央に配置させたいです。

Question

読みづらい所あるかと思いますがご容赦ください。私はプログラミング初学者で、現在学習課題である、
Railsでフリマサイトアプリの作成中です。新規会員ページフロントマークアップのみのビューを確認したところ。CSSが効いていない箇所があるのですが原因が自分の力では見つけられず、質問いたしました。

●やりたいこと
写真hamlのfooter_centerクラス内の子要素であるgrayクラス、incクラスをfooterの中央に配置されるようcssを効かせたいです。（fmarketという灰色のロゴ、Mercari.incという文字をfooterの中央に配置）

●調べてみた事、仮説
display: inline-block;を親要素であるfooter_centerに当てれば配置されると思っていたのですが、css自体が当たってないのは親子関係が不適切なのではと思い検証ツールを用いてみたのですがうまくいきませんでした。

.contena
  .user_new_header
    .logo
      =link_to root_path do
        = image_tag "fmarket_logo_red.svg", size: "185x49", alt: "フリマのアイコン"
  .user_new_main
    .contents
      .registration
        .new_member
          .new_member_name 新規会員登録
        .mail_sns
          .box
            %i.far.fa-envelope.mail_address  メールアドレスで登録する 
            %i.fab.fa-facebook-square.blue_sns Facebookで登録する
            %i.fab.fa-google.white_sns Google+で登録する
  .user_new_footer
    .head 
    .info_box
      .privacy ●プライバシーポリシー
      .terns ●利用規約
      .specific ●特定商取引に関する表記
    .footer_logo_box
      .footer_center
        .gray
          =link_to root_path do
            = image_tag "logo_gray.svg", size: "80x65", alt: "フリマのアイコン"
        .inc © Mercar![イメージ説明](b9682ab25e71894e68d5862657fe9e6a.png).

signup/index.scss


.contena {
  .user_new_header {
    height: 128px;
    color: #ffffff;
    .logo {
      text-align: center;
      line-height: 90px;
      padding-top: 40px;
    } .img {
    }
  }
  .user_new_main {
    height: 344px;
    .contents {
    // height: calc(100vh - 128px);
    width:700px;
    margin: 0 auto;
    background-color: #ffffff;
    .registration {
      height: 344px;
      text-align: center;
      box-sizing: border-box;
        .new_member {
        padding: 32px;
        border-bottom: 1px solid #f5f5f5;
        }
          .new_member_name {
            font-size: 22px;
            font-weight: bold;
        }
        .mail_sns {
        height: 247px;
        padding: 24px 16px 40px;
        // text-align: center;
        box-sizing: border-box;
        }
          .box {
          margin: 0 auto;
          display: inline-block;
            .mail_address {
            background-color: #ff0000;
            color: white;
            height: 50px;
            width: 343px;
            border-radius: 4px;
            font-size:14px;
            text-decoration: none;
            line-height: 50px;
            }
            .blue_sns {
            background-color: #4169e1;
            color: white;
            height: 50px;
            width: 343px;
            border-radius: 4px;
            font-size:14px;
            text-decoration: none;
            line-height: 50px;
            margin: 16px 0 0;
            }
            .white_sns {
            background-color: #d3d3d3;
            height: 50px;
            width: 343px;
            border-radius: 4px;
            font-size:14px;
            text-decoration: none;
            line-height: 50px;
            margin: 16px 0 0;
            }
      }
    }
    }
    }}
  .user_new_footer {
    height: calc(100vh - 128px -344px);
    margin: 0 auto;
    // box-sizing: border-box;
      .head {    
      }
      .info_box {
      text-align: center;
      height: 12px;
      padding: 40px 0;
        .privacy {
        display: inline-block;
        font-size: 12px;
        color: #808080;
        }
        .terns {
        font-size: 12px;
        display: inline-block;
        color: #808080;
        }
        .specific {
        font-size: 12px;
        display: inline-block;
        color: #808080;
        }
      .footer_logo_box {
        width: 1012px;
        height: 220px;
        .footer_center {
        height: 220px;
        width: 456px;
        text-align: center;
        display: inline-block;
        margin:0 auto;
          .gray {
          margin:0 auto;
          }
          .inc {
          font-size: 13px;
          }
    }}}}

Comments

[s8_chu]

画像が適切にリンク出来ていないようですが、現在のスクリーンショットのみで全てでしょうか？

Answer 1

写真hamlのfooter_centerクラス内の子要素であるgrayクラス、incクラスをfooterの中央に配置されるようcssを効かせたいです。（fmarketという灰色のロゴ、Mercari.incという文字をfooterの中央に配置）

それは .footer_center クラスが適用された要素に対して text-align プロパティを適用することで実現出来ます (動作確認用リンク)。

.footer_center {
  text-align: center; // 追記
}

css自体が当たってないのは親子関係が不適切なのではと思い検証ツールを用いてみたのですがうまくいきませんでした。

原因は質問者さんも書かれているとおり、親子関係によって当該要素が選択されていないことです。質問文の SCSS では .info_box クラスが適用された要素内に .footer_center クラスが適用された要素が存在する必要があります。

.info_box {
  text-align: center;
  height: 12px;
  padding: 40px 0;

  // 省略

  .footer_logo_box {
    width: 1012px;
    height: 220px;

    .footer_center {
      height: 220px;
      width: 456px;
      text-align: center;
      display: inline-block;
      margin: 0 auto;

      // 省略
    }
  }
}

しかし、 Haml を読むと .info_box クラスが適用された要素の子孫には .footer_center クラスが適用された要素が存在しません。

.info_box
  .privacy ●プライバシーポリシー
  .terns ●利用規約
  .specific ●特定商取引に関する表記
.footer_logo_box
  .footer_center

Comments

[honki86]

s8_chu様のご回答のお陰で問題を解決できました！ベストアンサーとさせていただきます！
インデントを見直しさせていただきました。
ご指摘残りの問題はもう少し自分で調べさせていただこうと思います。
ありがとうございました！