囲み枠を中央に配置する方法

「囲み枠を中央に寄せるには？」

とご質問をいただきました。

 

 

文字数で変わる囲み枠だと

右側の余白が気になる場合もありますよね。

 

 

今回は

囲み枠を中央に配置する方法を

ご紹介します。

やり方はいろいろありますが

わかりやすい方法で＾＾

 

 

例えば…

本文はここに入力してください。
改行は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で！

 

【注意】

もし

囲み枠の下の文章まで中央揃えになったときは

最後の</div>が消えていることがあるので

消えていないかチェックしてみてください。

 

<div style="text-align: center;">
<div style="display: inline-block; border: 4px double #48AADC; padding: 15px; text-align: left;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

 

 

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています！

「マーカー」とメッセージを送ってねドキドキ

友だち追加

ID検索は @570smkow 

 

 

 

デザインとブログアドバイスで 起業女性をサポートしています。

 

◆ あなたの魅力があふれるブログに⇒ アメブロカスタマイズ

◆ 書きやすく伝わりやすいブログに⇒ ブログ診断

◆ ランディングページやホームページの制作もしています。

 

お問合せ⇒お問合せフォーム