CSSAnimation
Googleでログイン問題11：a要素を中央揃えにしよう
今回はインラインブロックの中央揃えの方法を学習していきましょう！
あらかじめエディタに書くコード
<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¥
完了にする！
活動記録をTweetする
※ここでいう50%とは親要素の値のことです。
そして子要素自身の大きさのせいで中央よりずれてしまっているのでtranslateを使って-50%ずつx軸方向、y軸方向に与えます。
※ここでいう50％は子要素の値のことです。