ブロックの中央揃え

タグ: 中央揃え

このトピックには5件の返信、2人の参加者があり、最後にbeginnerにより4年、 10ヶ月前に更新されました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

投稿者

投稿
2020年1月24日 9:11 PM #31142

beginner
参加者

お世話になります

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

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

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

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

2020年1月25日 1:11 PM #31191
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;
	}
}
```
2020年1月25日 5:15 PM #31207

beginner
参加者

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

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

2020年1月25日 6:12 PM #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年、 10ヶ月前にDRILL LANCERが編集しました。
2020年1月25日 6:16 PM #31211
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;
}
```
- この返信は4年、 10ヶ月前にDRILL LANCERが編集しました。
- この返信は4年、 10ヶ月前にDRILL LANCERが編集しました。
2020年1月25日 8:30 PM #31226

beginner
参加者

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

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

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

投稿