Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8694

【初心者でもわかる】文章全体は可変で中央揃えで、中の文字は左寄せにする方法

$
0
0

どうも7noteです。親は中央、子は左寄せにする方法について

見本

image.png

ソース

index.html
<divclass="oya"><divclass="ko">こんちわ<br>こんばんわ<br>さようなら、また明日
  </div></div>
style.css
.oya{text-align:center;}.ko{border:1pxsolid#000;/* 見やすいように線を入れただけ */display:inline-block;text-align:left;}

解説

親(oya)要素にtext-align: center;を入れることで、子(ko)要素を中央寄せにします。

このとき、子要素がblock要素のままだと、可変にもできないし、中央寄せにもならないのでdisplay: inline-block;を指定します。

あとは子要素にtext-align: left;を指定することで、中身の文章は左揃えになります。

まとめ

たまに必要な場面があるので、やり方をわすれないようメモメモ。。。

おそまつ

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)


Viewing all articles
Browse latest Browse all 8694

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>