Question

我有这个div结构：

<div id="outer-div">
    <div id="first-div"></div>
    <div id="cell-icon">anFAicon</div>
</div>

和风格：

#outer-div {
  height:80px;
  width:100px;
  border: 1px solid red;
}
#first-div {
  width:50%;
  height:100%;
  border-right: 2px solid #619e38
}
#cell-icon {
  border:1px solid blue;
  position: absolute;
  top: 50%;
}

这将输出：

见这里：https://codepen.io/neptune01/pen/RZgwvd

我需要的是：

我想将div单元格图标放在外部div的中间，而不是其他div。尝试绝对位置，但它不起作用，如上所示。

Answer 1

解决方案

#outer-div {
  height:80px;
  width:100px;
  border: 1px solid red;
  position: relative;
}
#first-div {
  width:50%;
  height:100%;
  border-right: 2px solid #619e38
}
#cell-icon {
  border:1px solid blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  background-color: #fff;
  z-index:1;
}

<div id="outer-div">
    <div id="first-div"></div>
    <div id="cell-icon">anFAicon</div>
</div>

我改变了什么

首先，我向您的position: relative CSS添加了#outer-div。这样，当您稍后使用绝对定位时，元素被约束在#outer-div容器内，而不是主体（元素相对于最接近的父元素，位置值为absolute或{ {1}}）。

然后，我只是将relative添加到left: 50%元素，将其向左移动50％，然后将#cell-icon移至move the div into the exact centre。

最后，我添加了transform:translate(-50%, -50%)白色background-color z-index 1（如评论部分所示），将#cell-icon元素置于其他两个元素之上div（如图所示）。

Answer 2

.cell-icon移动的原因是因为您需要将position: relative放在其父元素（#outer-div）上。见下文：

#outer-div {
    height:80px;
    width:100px;
    border: 1px solid red;
    position: relative;
}

Answer 3

您可以使用pseudo selector :before and :after在div之间绘制line，将position:relative添加到父div，#outer-div这里相对于父position:absolute元素格。

#outer-div {
  height: 80px;
  width: 100px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}

#first-div {
  width: 50%;
  height: 100%;
}

#cell-icon {
  border: 1px solid blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#outer-div:before {
  content: "";
  position: absolute;
  width: 2px;
  height: 75%;
  background: green;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

#outer-div:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 75%;
  background: green;
  bottom: -75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="outer-div">
  <div id="first-div"></div>
  <div id="cell-icon">anFAicon</div>
</div>

Answer 4

如果我理解你正在尝试正确做什么，那么我认为使用CSS是不可能的，同时保持子元素定位绝对。

如果元素具有绝对位置，则它将根据浏览器维度考虑高度和宽度。因此，子元素维度不能与其父元素一起改变。

如果您需要position:absolute，那么您可以使用javascript查找其父级的高度，然后相应地将其应用于子元素。

替代绝对位置，您可以使用position:absolute并使用float:left/float:right属性来获取结果。

您可以使用以下代码： float:left/float:right

margin

margin 设置保证金以使其正确。

将div放在父div的中间，而不是其他兄弟div

4 个答案:

解决方案

我改变了什么