ブロックの中央揃え

[beginner]

お世話になります

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

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

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

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

[DRILL LANCER]

ブロックごとに中央揃えをすると左端が揃わず別の意味で違和感が生じると思います。
下記コードは１カラム時の記事エリアの幅を調整する 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;
	}
}

[beginner]

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

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

[DRILL LANCER]

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

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

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

.mainSection-col-one [class*="wp-block-"]:not(.wp-block-image) {
	margin-left: auto;
	margin-right:auto;
	max-width:600px;
}

[DRILL LANCER]

冒頭に記載の３つのみで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;
}

[beginner]

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

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

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

[投稿者]

投稿