中央揃えにしよう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¥
完了にする!
解説