こんにちは。niinaです。
先日メインビジュアルの画像上に配置するコピーライトを、左揃えのまま中央に配置する方法がわからず苦悩していました…
問題になっていたのは、中央配置したいコピーライト部分のh2要素にposition指定をしていたため、margin: 0 auto;が効かないということでした。
解決策がわかったので備忘録として記録しておこうと思います。
positionを使うと要素が浮いたような状態になる
今回の場合は、メインビジュアルの最下部にコピーライトを置きたかったので、コピーライトの位置をpositionで指定することにしました。
html
<divclass="mv"><h2class="mv-copy">コピーライトです</h2></div>css
.mv{position:relative;}.mv-copy{position:absolute;bottom:0;}何も知らなかった私は安易に.mv-copyにmargin: 0 auto;すれば左揃えのまま、中央配置にできるもんだと思っていました。
が、実はpositionを使った場合、marginは効かなくなってしまうのです。
何故か？？
それはpositionを使うことで、その要素自体が浮いたような状態になってしまうからです。
positionとtransformで要素を移動させよう
それでは中央に配置するためにはどうすればいいのでしょうか。
そこで使うのがpositionとtransformです。
実際に見ていきましょう。
css
.mv-copy{position:absolute:bottom:0;left:50%;/*まずは要素を左に50%移動させる（要素の最左部がど真ん中にくる）*/transform:translateX(-50%);/*余分に左に移動してしまった要素の半分だけ右に戻す*/これで完成です。
