中央揃えにしよう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％は子要素の値のことです。

ログインして解答を見る