Question

我一直在尝试一种方法来让页面元素与其两侧的元素重叠并保持它们之间的完美居中。我的解决方案是声明position:relative并设置负margin值大致等于元素宽度的50％，但我能够得到的最接近的是元素其父宽度的百分比的一半：

<!DOCTYPE html>
<html>
 <head>
  <style>
  .clap {
   position:relative;
   margin:auto -16.66%; // This element's share of the entire parent's width = 33.33%
   color:#f00
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
  </center>
 </body>
</html>

我正在尝试找到一个仅使用CSS的解决方案，它将使用元素本身的宽度，而不是容器的宽度。我无法使用JavaScript来执行此操作，因为我计划将其作为MathJaX修复程序嵌入到\style命令中。（据我所知，MathJaX没有在其公式中提供嵌入式HTML或JavaScript代码，所以你明白为什么它必须只有CSS。我知道它可以用脚本编写。是否可以使用CSS，或者我的努力是无望的？

更新：感谢@Daiwei的建议，我想我正在寻找合适的解决方案。谢谢你的所有答案。以下是修订后的代码：

.clap {
 position:absolute;
 display:inline-block;
 transform: translate(-50%,0);
 color:#f00                      // for contrast 
}

我很乐意向您展示结果，但我无法上传图片。遗憾。

另一个更新：我在上面介绍的解决方案最适合HTML / CSS上下文，但它在MathJaX array，matrix或类似的表格环境中中断。具体来说，如果元素太长，它会在左侧剪辑。相对定位将元素向左移动一半，但留下了过去的空间！有任何补丁的想法吗？

Answer 1

我已经看到了使用transform来集中元素的现代技巧。（如果我理解基本问题）

element {
  position:relative;
  top:50%; // ^1
  transform:translateY(-50%); // ^2,3
}

您可以将top:50%;用于纵向，left:50%;用于横向。
然后，您将translateY(-50%)用于纵向，translateX(-50%)用于水平居中。
您需要为transform使用前缀。我强烈建议您在工作流程中使用autoprefixer。

<强>加成：
您还可以使用此技巧将元素与其父级的底部或右侧对齐，例如在table-cell中使用100%而不是{c}中的50%。

Answer 2

由于元素的大小仅在样式之后才知道，样式应如何使用它？想象一下：某些元素的宽度为CSS自身宽度的200％（=“正常”的双倍大小）。其中一个孩子的宽度设置为父母的100％（=我们的元素）。元素的默认宽度由其内容决定。元素的内容与元素本身一样宽。我们的元素没有宽度，但是，因为我们正在等待它获得一些默认值，所以我们可以加倍。结果：没有任何东西可以获得任何宽度。

因此：你想做的事情是不可能的。但是CSS3有它的calc，也许你可以更接近你想用它做什么？

Answer 3

我不知道这是不是你想做的，但这是一个演示：http://cdpn.io/bgkDf

HTML

<div class="container">
  <div id="box-left"></div>
  <div id="box-overlap">
    <div id="box-overlap-inner"></div>
  </div>
  <div id="box-right"></div>
</div>

CSS

.container > div {
  height: 50px;
  float: left;
}
#box-left {
  width: 40%;
  background-color: red;
}
#box-right {
  width: 60%;
  background-color: green;
}
#box-overlap {
  width: 0;
}
#box-overlap-inner {
  position: relative;
  z-index: 10;
  height: 50px;
  width: 50px;
  transform: translate(-50%,0);
  background-color: rgba(0,0,255,.5);
}

Answer 4

＆＃34;使用元素自己的宽度进行计算或百分比＆＃34;一般来说：

（也许不是您问题的最佳解决方案，而是您问题的答案）

目前，attr功能在Chrome中无效。那本来不错。但是，如果您自己设置父属性，或者能够使用预定义属性，则可以使用变量。这样你就可以使用calc（）函数来计算你的子属性。

以下是使用浏览器定义的视口大小计算元素宽度的示例：

<!DOCTYPE html>
<html>
 <head>
  <style>
  :root {
     --module-size: 33vw;
   }

  .clap {
   display:inline-block;
   width: calc(var(--module-size) / 2);
   color:#f00;
   border: 1px solid;
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890
    <span class="clap">1234567890</span>
   1234567890</span>
  </center>
 </body>

可以通过许多有趣的方式使用它来简化CSS。例如使用@media风格......

使用元素自己的（不是父级）宽度进行计算或使用css中的百分比，不使用javascript

4 个答案: