ブロックの中央揃え

VWSとは フォーラム Lightning ブロックの中央揃え

ブロックの中央揃え

タグ: 

  • このトピックには5件の返信、2人の参加者があり、最後にbeginnerにより4年、 1ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #31142

    beginner
    参加者

    お世話になります

    ■質問内容
    ブロックの「タイムライン」「ステップ」「質問と回答」

    1カラムで上記のブロックを使用すると、左側に寄ってしまい真ん中の空白が大きくバランスが悪くなります
    そのため、中央揃えにしたいと考えております

    ■使用プラグインテーマ
    ・Charm
    ・バージョン 5.1.0

    ご教示の程よろしくお願い致します。

    #31191

    DRILL LANCER
    モデレーター

    ブロックごとに中央揃えをすると左端が揃わず別の意味で違和感が生じると思います。
    下記コードは1カラム時の記事エリアの幅を調整する CSS のコードです。
    下記をベースに width の部分を色々と変更してみてください。

    .mainSection-col-one,
    .sideSection-col-one {
    	margin-left:auto;
    	margin-right:auto;		
    }
    @media (min-width: 992px) {
    	.mainSection-col-one,
    	.sideSection-col-one {
    	  width: 600px;
    	}
    }
    @media (min-width: 1200px) {
    	.mainSection-col-one,
    	.sideSection-col-one {
    	  width: 600px;
    	}
    }
    #31207

    beginner
    参加者

    DRILL LANCERさん、回答ありがとうございます!

    記事エリアの幅を調整したのですが、他の画像なども小さくなってしまい満足のいく結果になりませんでした
    記事の幅はそのままで、ブロックだけ中央揃えにするのは難しいのでしょうか?

    #31210

    DRILL LANCER
    モデレーター

    全てのブロックがエリアの幅を精一杯使用しているため一工夫が必要となります。
    つまり、ブロック単位で幅を調整しなおかつ中央揃えにする必要があります。

    (文字のみの中央揃えも試しましたがさすがに滑稽だったので却下しました。)

    とりあえず、画像ブロック以外のブロックの幅を調整し中央揃えにする方法を書いておきます。
    下記 CSS コードで画像以外のブロックを中央揃えにできます。
    width の値は適宜変更してください。

    .mainSection-col-one [class*="wp-block-"]:not(.wp-block-image) {
    	margin-left: auto;
    	margin-right:auto;
    	max-width:600px;
    }
    • この返信は4年、 1ヶ月前にDRILL LANCERが編集しました。
    #31211

    DRILL LANCER
    モデレーター

    冒頭に記載の3つのみでOKの場合は下記コードで可能となります。
    width の値は適宜変更してください。

    .mainSection-col-one .wp-block-vk-blocks-faq,
    .mainSection-col-one .wp-block-vk-blocks-timeline,
    .mainSection-col-one .wp-block-vk-blocks-step {
    	margin-left: auto;
    	margin-right:auto;
    	max-width:600px;
    }
    • この返信は4年、 1ヶ月前にDRILL LANCERが編集しました。
    • この返信は4年、 1ヶ月前にDRILL LANCERが編集しました。
    #31226

    beginner
    参加者

    DRILL LANCERさん、回答ありがとうございます

    教えて頂いた、CSSコードを使ったら中央揃えになりました!

    お忙しい中ありがとうございました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。