Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8925

CSSで画像を重ねる+中央に配置する方法のメモ

$
0
0

1.重ねたい画像(動画)のタグを囲む新しいdivタグ(sample-box)を追加する

<divclass="sample-box"><videoid="myvideo"width="500"height="500"mutedautoplayplaysinline></video><imgclass='scope'width="200"height="200" src="https://iconlab.kentakomiya.com/wp/wp-content/uploads/2019/08/icon0140.png"/></div>

2.CSSに↓を追加

.sample-box{position:relative;}.scope{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

transform: translate(-50%, -50%);で画像の中央を支点に配置が可能

参考
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
【HTML・CSS】画像の上に画像や文字を重ねる方法


Viewing all articles
Browse latest Browse all 8925

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>