gpt4 book ai didi

html - 在多个 div 上居中 div

转载 作者:行者123 更新时间:2023-11-28 07:30:00 25 4
gpt4 key购买 nike

所以我很难将一个 div 与另一个 div 对齐,并将一堆图像作为(伪)“背景”,如下所示:

http://i.imgur.com/uHmcBlB.png

但我尝试将其定位为绝对和相对,结果总是这样:

http://i.imgur.com/9gDaSIe.png

我的代码:

<body class="site com_content view-featured no-layout no-task itemid-101">

<!-- Body -->
<div class="body">
<div class="container">
<div class="row-fluid">
<main id="content" role="main" class="span12">
<!-- Begin Content -->

<div id="modInistagram">
<div class="cbinstaphotobox">
<div class="col-lg-12">
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
<figure class="figurefx dualpanels">
<img>
</figure>
</div>
</div>
</div>
<div class="custom">
<div class="logo">
<img src="tcsslogosmall.png" alt="logo">
<div class="socialicons">
<a href="facebook.com/YYYshop">
<img src="fb.png">
</a>
<a href="instagram.com">
<img src="instgr.png">
</a>
</div>
<div class="contacts">
<h4 style="text-align: center;"></h4>
</div>
</div>
</div>
<!-- End Content -->
</div>
</div>
</main>
</div>
</div>
</div>
</body>

“自定义”div 是我想要“ float ”在“modInstagram”上的那个。

最佳答案

如果您使用 position: relative 包裹图像并覆盖在父元素中,您将能够在覆盖元素上使用 position: absolute 将其定位在顶部的图像。

这是一个简单的例子: https://jsfiddle.net/hmpxdezy/1/

编辑后的答案:

根据您的 jsFiddle,您是否希望将 div.custom 置于 div#modInistagram 之上?

如果是这样,这里有一个更新的 fiddle ,可以让您了解如何使用现有标记实现您想要的效果: https://jsfiddle.net/24157Lmf/1/

您需要将position: relative 添加到main#content 并将position: absolute 添加到div.custom。从那里您可以使用与我的 original jsFiddle 类似的方法将叠加元素居中对齐。 left: 50% 和一个负值 margin-left,其值为您要居中的元素宽度的一半。

关于html - 在多个 div 上居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31585130/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com