TIL13 CSS

5031 ワード
おしゃれなライオンのように TIL 先端学校2期 テキストリンク

display:flex, line-height

<style>
    .container {
        display: flex;
        height: 500px;
        background-color: beige;
        border: 2px solid black;
      }

      .box {
        background-color: pink;
        border: 2px solid black;
        width: 100px;
        height: 100px;
        margin: 10px;
        text-align: center;
        line-height: 100px;
        /* line-heigt로 중앙정렬 */
      }
</style>


<div class="container">
      <div class="box">box1</div>
      <div class="box">box2</div>
      <div class="box">box3</div>
    </div>

display:flexを使用するには、containerのようなネストされた親概念が必要です.
line-heightとheitの大きさを等しくすれば、中央揃えができます!
line-heightが一番理解できません.
カッコいい同期達の助けですぐに納得!!
自分の手で絵を描いてくれて、理解してくれました.😎

1.その箱の大きさは100 pxで、元のline-heightが10 pxだと思ったら、その状態です.
2.boxサイズのline-heightが100 pxなら真ん中!

行間を上下に挿入!完全理解!
今日の考え:課題を遅らせてはいけない.ゞㅠㅠ都做吧!!ゞ今日はもっと充実!
[フロントエンド]CORSの由来、特徴と用途
平均値を求める