プロフィール画像編集ボタンなど、画像のど真ん中に文字やアイコンを重ねたい場合。
縦方向にも横方向にもセンタリングされた何かを重ねたい。
なかなか素直に真ん中に来てくれないことが多い。(微妙にずれるなど)
縦や横のサイズをしっかり指定すれば解決できる。
//html <div class="example" style="width:150px;"> <img class="userIcon" src="/画像のパス.jpg" /> <font-awesome-icon class="kodomo" :icon="['fa', 'camera']" /> </div>
1行目のdiv class="example" style="width:150px;"> が結構重要。
ここで親となるdivのサイズを画像と同じにしておかないと、
画像が横長になったり、画像の領域外に「重ねたい要素」が来てしまったりする。
//css .example { position: relative; } .example .kodomo { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; /*余計な隙間を除く*/ padding: 0; /*余計な隙間を除く*/ color: white; /*アイコン色*/ font-size: 30px; /*サイズ*/ } .example img { width: 100%; } .userIcon { width: 150; height: 150px; border-radius: 50%; /*角丸*/ object-fit: cover; }
真ん中に何かを配置するだけでこれだけのCSSの量である。
あんま触れてないけど、
.userIcon { width: 150; height: 150px; border-radius: 50%; /*角丸*/ object-fit: cover; }
で画像を正円に切り取とっている。
中央から切り取っている。
参考にしたサイト
画像の上におしゃれに文字やボタンをのせる方法(CSS)
CSSで画像を円形に切り抜く方法:object-fitが簡単で便利!