欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css问题记录

程序员文章站 2022-05-31 11:32:13
...
  1. img在div中垂直方向居中?
    这句话通俗来说是让图片的中心放在垂直方向的中心上
<div>
<img src="foo.png"/>
</dvi>
<style>
img{
        position: relative;
        top: 50%;   //高度是50%,此时图片的中心肯定在50%的下面,所以要transform
        transform: translate(0,-50%); //以图片自身的宽度,高度作为参考进行移动,因为高度50%的时候是图片的上部在50%,所以要把图片往上移动图片的50%,这个图片才会居中显示。
        border-radius: 50%;
        width: 10rem;
    }
</style>