「囲み枠を中央に寄せるには?」
とご質問をいただきました。
文字数で変わる囲み枠だと
右側の余白が気になる場合もありますよね。
今回は
囲み枠を中央に配置する方法を
ご紹介します。
やり方はいろいろありますが
わかりやすい方法で^^
例えば…
本文はここに入力してください。
改行はShift+Enterで!
改行はShift+Enterで!
<div style="display:inline-block; border: 4px double #48AADC; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div>
これを<div style="text-align: center;"></div>
で囲むと…
<div style="text-align: center;"><div style="display:inline-block; border: 4px double #48AADC; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div></div>
↓ ↓ ↓
本文はここに入力してください。
改行はShift+Enterで!
改行はShift+Enterで!
中央に配置されました。
囲み枠の中の文字も中央寄せになります。
それでいい場合はこれで完了です^^
囲み枠の中の文章を中央寄せではなく
左揃えにしたい場合は
通常表示で
①文章をドラッグして選択
②「左寄せ」をクリック
囲み枠は中央に、文章は左寄せになります。
本文はここに入力してください。
改行はShift+Enterで!
改行はShift+Enterで!
【注意】
もし
囲み枠の下の文章まで中央揃えになったときは
最後の</div>が消えていることがあるので
消えていないかチェックしてみてください。
<div style="text-align: center;">
<div style="display: inline-block; border: 4px double #48AADC; padding: 15px; text-align: left;">本文はここに入力してください。改行はShift+Enterで!</div></div>
<div style="display: inline-block; border: 4px double #48AADC; padding: 15px; text-align: left;">本文はここに入力してください。改行はShift+Enterで!</div></div>
LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!
「マーカー」とメッセージを送ってね
ID検索は @570smkow
୨୧ アメブロで使える囲み枠一覧
୨୧ 囲み枠 週間・月間ランキング
୨୧ 囲み枠の便利な情報
୨୧ アメブロ設定ポイント10選
୨୧ Canvaのおすすめ情報