Bri*_*ink 22 html javascript css mathjax
我一直在尝试一种方法来使页面元素与其两侧的元素重叠并保持它们之间的完美居中.我的解决方案是声明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或类似的表格环境.具体来说,如果元素太长,它会在左侧剪辑.相对定位将元素向左移动一半,但留下了过去的空间!修补它的任何想法？
Jas*_*don 55
我已经看到了使用中心元素的现代技巧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%而不是使用50%css.
由于元素的大小只有在设置样式后才知道，那么样式应该如何使用它呢？想象一下：某个元素的宽度是 CSS 中设置的其自身宽度的 200%（=“正常”大小的两倍）。它的子元素之一的宽度设置为父元素（=我们的元素）的 100%。元素的默认宽度由其内容决定。我们元素的内容与元素本身的宽度一样。然而，我们的元素还没有宽度，因为我们正在等待它获得默认值，所以我们可以将其加倍。结果：没有任何东西会变得有宽度。
因此：您想要做的事情是不可能的。但是CSS3有它的calc，也许你可以使用它更接近你想要实现的目标？
| 归档时间： |
|
| 查看次数： |
25572 次 |
| 最近记录： |