ログイン

問題11 中央揃えにしよう1

CSSAnimationの問題

CSSAnimation

中央揃えにしよう1

問題

今回はインラインブロックの中央揃えの方法を学習していきましょう!

自分の環境に書くコード

              <div class="box">
  <a href="#">あいうえお</a>
</div>
¥HTML¥
            
              .box{
  border: 2px solid black;
  width: 300px;
  height: 100px;
  position: relative;
}
¥CSS¥
            

期待する画面

コードのアイコン

解答ソースコード

              .box{
  border: 2px solid black;
  width: 300px;
  height: 100px;
  position: relative;
}
a{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
¥CSS¥
            
答えのアイコン

解説

position:relativeを親要素に与えて、position:absoluteを子要素に与えます。そして、子要素にtop、left共に50%を与えます。※ここでいう50%とは親要素の値のことです。そして子要素自身の大きさのせいで中央よりずれてしまっているのでtranslateを使って-50%ずつx軸方向、y軸方向に与えます。※ここでいう50%は子要素の値のことです。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!