99. A-tag-not-highly-recommended

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

Webの可能性を感じさせる画像

要素を真ん中におく

このように真ん中におきたい時
    <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要素に対する長さを100%に指定しており、それに対してmy-class-childで場所を指定している、

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

並べたい要素をまとめて囲った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;
}
データサイエンティスト
絹田 雅
アーナンダよ、あなたはカピラヴァットゥのサキャ族の人たちに、修学すべき人(有学)の修学と実践について説明しなさい。わたしは背中が疲れました。背中を伸ばそう。 マハーナーマよ、ここに貴い弟子は戒をそなえ、感覚器官の門を防御し、食事の適量を知り、覚醒しており、七つの正しい教えをそなえており、明瞭なこころに依存し、現世で安楽に過ごす、明瞭なこころに依存する四段階からなる瞑想(四禅)を希求し、容易に得て、困難なく得ます。
twitter-timeline