[css]positionで中央位置に置く

レスポンシブサイト制作の際に角丸ボタンの配置がPCサイトではabsoluteで右上に設定しているのに、スマホサイトではabsoluteで下部中央だったのでちょっと悩みました。

そこでスマホサイトの角丸ボタンのCSS設定したメモ。

 #news_link {position:absolute; top:auto; right:0; bottom:30px; left:0; width:100%; text-align:center;}

#news_link a {     border-radius: 40px 40px 40px 40px;    display: block;    border: 1px solid #999;    width: 200px;    padding: 7px 0;    text-align: center;    font-size: 15px; margin:0 auto;}

ここでのミソは右と左のabsoluteが0であること(もちろん上下の中央をとりたいならtopとbottomを0にする)。
そしてmargin:autoをとっていること。

個人的にはあまり使うことない手法だったので、へ~と思った次第でした。
transform: translateで画面中央に配置するやり方もありますヨ。

カテゴリーCSS

コメントを残す