18910140161

Html

首页 >> 前端开发 >> Html

HTML-使重叠图像成为中心-堆栈溢出

顺晟科技

2022-10-19 11:59:56

130

试图使这些图片在中心对齐，但每次我试图添加对齐或边距时，它们都不会移动，不确定我添加的属性是否意味着它不能移动。我曾尝试将img上的位置改为固定，但它仍然不能居中，我只能用边距手动定位，但这显然不理想。

不胜感激！

以下是JSFiddle上的代码，使其更加容易 https://jsfiddle.net/dzk59p3u/3/

<html>
<head>

</nav>


    
<div class="box1">
<!-- <h1>W &nbsp;&nbsp;I &nbsp;&nbsp;L&nbsp; &nbsp;D</h1>-->
    <div class="cf">
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
      </div>
      </div>
    </div>
    <div class="cd">
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
      </div>
      </div>
    </div>

CSS

<html>
<head>

</nav>


    
<div class="box1">
<!-- <h1>W &nbsp;&nbsp;I &nbsp;&nbsp;L&nbsp; &nbsp;D</h1>-->
    <div class="cf">
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg"  alt="sometext" style="width:400px;height:420px" />
      </div>
      </div>
    </div>
    <div class="cd">
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
        <img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg"  alt="sometext" style="width:400px;height:420px" />
      </div>
      </div>
    </div>

顺晟科技：

将您的图像放入容器中，并在其上使用。设置和to将垂直和水平对齐此容器的直接子级。

然后我会为您的每个悬停图像添加一个额外的容器。将其设置为，以便它的子级相对于它定位。

最后，绝对定位您的图像在您的悬停容器。我也会使用，这样它们就不会拉伸，但大小相同。

  • TAG：
上一篇：JavaScript-使用PHP或J 下一篇：JavaScript-文件上载进度条
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！