Question

我正在尝试为页面实现以下设置，其中有一个左右div和一个＆＃39;浮动＆＃39;图像位于两个div之上的中心：

我试过给img1一个z-index和position: relative（或position: absolute这个问题），但这并没有帮助我实现目标。任何有关如何将图像浮动在这两个div上方的中心？

我目前使用以下代码：

Answer 1

将[UIPopoverPresentationController presentationTransitionWillBegin]分配给DIV1，将以下设置分配给.IMG1。 .IMG1必须在里面 DIV1（即成为DIV1的孩子）才能发挥作用。

position: relative;

另外：您之前没有发布过代码，所以我只是用图形描述中的元素名称描述了基本的必要设置，但这应该是明确的。

Answer 2

尝试此代码：您可以根据需要调整div宽度和边距。此代码还根据桌面屏幕进行调整。感谢

CSS：

.floatedDiv{
  float:left;
  width:50%;
  background:grey;
  height:50px;
}
.imgDiv {
width: 20px;
height: 20px;
position: absolute;
background: green;
left: 50%;
margin-left: -10px; /*half of the length of the div*/
top:15px;
}
.red{
background:red;
}

HTML：

<body style='margin:0px;'>
    <div class='floatedDiv red'></div>
    <div class='floatedDiv'></div>
    <div class='imgDiv'></div>
</body>

Answer 3

在我的情况下，我position:absolute图片，然后将 position：relative 添加到父div。

HTML（带有引导程序）

.col-6{ height:500px; }
img{
  margin-left:33%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row" style="position:relative;">
  <div class="col-6 bg-success"></div>
  <div class="col-6 bg-warning"></div>
  <img src="https://picsum.photos/200/150?grayscale" style="position:absolute;">
</div>

浮动图像以2个div为中心

3 个答案: