NP-Systems@個人開発
Home › hacks-of-it › HTMLで要素の位置を調整する

HTMLで要素の位置を調整する

by M. Shikishima

クリエイターとエンジニアを応援するNP-Systems@個人開発

Contents hide
1 要素を真ん中におく
2 ２つの要素を横に並べたい時

要素を真ん中におく

このように真ん中におきたい時

    <div class="ion-text-center my-class-parent">
        <ol class="my-class-child">
          <li>hi</li>
          <li>hi2</li>
        </ol>
    </div>
.my-class-parent {
  height: 100%;
  position: relative;
}

.my-class-child {
  position: absolute;
  left: 50%;
  top:30%;
  padding-left: 0;
}

my-class-parentでBody要素に対する長さを１００％に指定しており、それに対してmy-class-childで場所を指定している、

２つの要素を横に並べたい時

並べたい要素をまとめて囲ったTagにdisplay:flexをつけてやる．あとはboxの幅を100%で指定しているので，Imgで幅を指定したらそれを埋めてくれるようになる

                      <div class="flex">
                      <img src="assets/img/syabani.jpg" alt="" >
                      <div class="box">{{welcomeMessage}}</div>
                      </div>

  .flex{
    display: flex;
    /*justify-content: center;*/
  }

  .flex img{
    max-width: 100%;
    width: 30%;
    height: auto;
  }

  div.box{
    width: 100%;
    background-color:#CCCCFF;
}

About Author: M. Shikishima

@Masaya04997245 会社員をしながら個人でシステム開発をしています．
this is single-default.php
最新記事
同カテゴリの記事 hacks-of-it