相关疑难解决方法(0)

我正在寻找这样的语法：

.centered{
    left: calc(50% - current-width/2)
}

基本上，一种引用current-width目标元素的方法，以便我可以将灵活宽度的项目居中。这存在吗？

我有一个绝对定位的 div，我给了它一个left位置。

对于桌面，必须有left100px的位置。

但是对于平板电脑，我想一直向右推。

为了实现这一点，我尝试做right: 0，但由于left: 100px已经在 CSS 中定义，right: 0并没有按预期将它一直推到右边。

然后我尝试left: 0在平板电脑上做以抵消它的效果，但这也不起作用。

有没有办法取消left头寸？类似的东西left: none（我知道这行不通，但这是我能够解释这一点的唯一方法。）

桌面 CSS：

.mydiv {
    positon: absolute;
    left: 100px;
}

平板电脑 CSS：

@media (max-width:768px){
    .mydiv {
        left: 0;
        right: 0;
    }
}

我可以做一些事情，比如right: 400px把它放到我想要的位置，但我很好奇是否有一种方法可以使用，right: 0所以我确信它被完全推到了右边。

谢谢！

我有一个绝对定位的弹出窗口(悬停在"冰白"图像上看弹出窗口),其中有css离开:50%.现在这应该出现在页面中间但不是.有什么建议吗？提前致谢.

我想实现这个完全合理的水平菜单：

对齐是通过 Flexbox 完成的并且有效，但是我也无法使分隔的中点对齐；它们是通过伪类使用 css-content 制作的。另外，我想知道是否有更好的方法来垂直居中项目，而不是通过添加填充来伪造它，就像我所做的那样。

这是我的代码和小提琴：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
li.home {
  padding: 0;
}
li {
  vertical-align: middle;
  padding-top: 10px;
}
nav {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 40px;
}
li::after {
  //padding: 0em 0.4em;
  content: '\00b7';
  pointer-events: none;
}
li.home::after,
li.last::after {
  content: none;
  text-align: justify;
}

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <li class="second"><a href="#">Item 1</a></li>
    <li><a href="#">Item …

我构建了一个 flexbox 日历布局，其中包含悬停时的 CSS 工具提示。我正在尝试将这些工具提示与它们对应的日历日期垂直对齐。

我想在 CSS 中实现这一点，但一直无法实现。目前，我已经在 jQuery 中设置了一个left值4em并动态计算了该top值，因为这些工具提示的高度可能会有所不同。即使这样做，工具提示也没有完全垂直对齐，我不知道为什么。

这是我的jQuery功能：

$('.cal-tooltip').each(function() {
  var calTooltipHeight = $(this).outerHeight(true) / 2;

  $(this).css('top', -calTooltipHeight);
});

CSS：

.tooltip {
  position: absolute;
  z-index: 1;
  background-color: white;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
.tooltip:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -15px;
  margin-top: -15px;
  top: 50%;
  box-sizing: border-box;
  border: 15px solid black;
  border-color: transparent transparent white white;
  transform-origin: 50% 50%;
  box-shadow: …

我想模拟在 CSS中transform-origin使用的属性transform: translate。

根据 MDN，这很有可能：

通过首先通过属性的否定值转换元素，然后应用元素的转换，然后通过属性值转换来应用此属性。

但是，当我尝试时，我得到了错误的结果。这两个矩形显然不一样：

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
}

.container {
  float: left;
  margin: 100px;
  width: 250px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="container">
  <div class="box origin">
  </div>
</div>

<div class="container">
  <div class="box translate">
  </div>
</div>

很长一段时间以来，我一直在尝试寻找没有运气的答案，在我看来它应该相对简单，我只是想不通。

我正在使用 react 和 react-chartjs-2，所以我认为发布标记会使问题复杂化。但在高层次上，布局看起来像这样

<div class="parent">
    <div class="percent">80%</div>
    <div class="pie-chart">...</div>
</div>

css

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

结果

问题是 display flex 将两个孩​​子集中在一起。是否有可能.percent在.parent不考虑的情况下说以内为中心.pie-chart？