問題
11
CSSアニメーション
a要素を中央揃えにしよう
CSSアニメーションの問題に挑戦しよう！
問題
「a要素を中央揃えにしよう」
今回はインラインブロックの中央揃えの方法を学習していきましょう！
あらかじめエディタに書くコード
<div class="box">
<a href="#">あいうえお</a>
</div>
¥HTML¥
.box{
border: 2px solid black;
width: 300px;
height: 100px;
position: relative;
}
¥CSS¥
期待する画面
解答と解説（a要素を中央揃えにしよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
position:relativeを親要素に与えて、position:absoluteを子要素に与えます。そして、子要素にtop、left共に50%を与えます。
※ここでいう50%とは親要素の値のことです。
そして子要素自身の大きさのせいで中央よりずれてしまっているのでtranslateを使って-50%ずつx軸方向、y軸方向に与えます。
※ここでいう50％は子要素の値のことです。
