与 CSS 中的 % 水平对齐

Question

我制作了一种图表，其中包含温度值和时间表。现在我想将时间标签与 "blocks" 之间的间隙中间完美对齐。第一个使用 position:absolute 和 left:(%-px/2)，但第二个和第三个示例关闭。如何对齐这些框？

Fiddle 是 HERE。

body {
  background-color: #DDD;
}

a {
  cursor: pointer;
}

.block {
  display: block;
  height: 100%;
  color: #FFF;
  font-size: .75em;
  float: left;
  position: relative;
  opacity: 1;
  transition: opacity, 0.4s ease; /* hover effect transition */
  border-radius: 5px;
}

.block:nth-child(n+2) {
  margin-left: 0.5%;
}

.block:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.block.cool,
.legend li:nth-of-type(1):before {
  background-color: #41A6F0;
}

.block.hot,
.legend li:nth-of-type(2):before {
  background-color: #E27A3F;
}

.paused.cool {
  background-color: #ccc;
}

.paused.hot {
  background-color: #bbb;
}

.barchart {
  display: grid;
  margin: 0;
  grid-template-columns:
    [viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
  grid-auto-rows: 30px;
}

row {
  padding: 5px;
  grid-column: container;
  grid-row: span 4;
  line-height: 120px;
  text-align: center;
  width: 0%;
  animation: expand 1.2s ease forwards;
  /* see animation "expand" below */
}

timerow {
  grid-column: container;
  grid-row: span 1;
  line-height: 14px;
  text-align: center;
  visibility: hidden;
  animation: 1.3s blendin; /* see animation "blendin" below */
  animation-fill-mode: forwards;
  margin-top: -15px;
  position: relative;
}

timerow a {
  position: absolute;
  height: 25px;
  width: 44px;
  font-size: 0.8em;
  color: #919191;
  background: #fff;
}

/*
timerow a:last-child {
  float: right;
  margin-right: -12px;
}

timerow a:first-child {
  margin-left: -17px;
}
*/
tag {
  grid-column: container;
  padding-top: 8px;
  font-size: 0.8em;
  color: #919191;
}

/* Big-Screen Design */
@media screen and (min-width: 768px) {
  .barchart {
    margin-left: -4.5em;
    grid-template-columns:
      [viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
  }

  tag {
    grid-column: axis-start/container-start;
    grid-row: span 4;
    line-height: 120px;
    padding: 0;
    text-align: center;
  }

}

/* intro animation */
@keyframes expand {
  from {
    width: 0%;
  }

  to {
    width: calc(100% - 12px);
  }
}

@keyframes blendin {
  99% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}

@media screen and (min-width: 768px) {
  @keyframes expand {
    from {
      width: 0%;
    }

    to {
      width: calc(100% - 13px);
    }
  }
}

row:nth-child(4) {
  animation-delay: .1s;
}

row:nth-child(6) {
  animation-delay: .2s;
}

<div class="barchart">
  <tag>Workday</tag>

  <row>
    <a style="width:28.9444444444%;" class="block cool">19deg</a>
    <a style="width:63.805555555%;" class="block hot">21deg</a>
    <a style="width:6.25%;" class="block hot">22deg</a>
  </row>

  <timerow>
  <a style="left:calc(29.1944% - 22px);">07:30</a>
  <a style="left:calc(93.5% - 22px);">22:30</a>
  </timerow>

  <tag>Weekend</tag>
  <row>
    <a style="width:44%;" class="block cool">16deg</a>
    <a style="width:16%;" class="block paused hot">21deg</a>
    <a style="width:38.5%;" class="block paused cool">18deg</a>
  </row>
  
  <timerow>
  <a style="left:calc(44% - 22px);">00:00</a>
<a style="left:calc(60.75% - 22px);">00:00</a>
  </timerow>
  
</div>

timerow a {
  position: absolute;
  height: 25px;
  width: 44px;
  font-size: 0.8em;
  color: #919191;
  background: #fff;
}

这个位置太靠右了，

  <a style="left:calc(93.5% - 22px);">22:30</a>

虽然这个效果很好，但“:”位于间隙的中心：

  <a style="left:calc(29.1944% - 22px);">07:30</a>

即使我添加了 % 数字并考虑了 0.5% 的差距并减去 22px 以获得框宽度的一半。

Answer 1

您还需要考虑填充，因为 position:absolute 考虑使用填充框进行计算。将边距添加到 timerow 等于应用于行的填充，您的计算将是正确的。

您还可以通过翻译简化 -22px。还要考虑 box-sizing:border-box; 到您的行元素，而不是减少动画中的宽度。

body {
  background-color: #DDD;
}

a {
  cursor: pointer;
}

.block {
  display: block;
  height: 100%;
  color: #FFF;
  font-size: .75em;
  float: left;
  position: relative;
  opacity: 1;
  transition: opacity, 0.4s ease; /* hover effect transition */
  border-radius: 5px;
}

.block:nth-child(n+2) {
  margin-left: 0.5%;
}

.block:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.block.cool,
.legend li:nth-of-type(1):before {
  background-color: #41A6F0;
}

.block.hot,
.legend li:nth-of-type(2):before {
  background-color: #E27A3F;
}

.paused.cool {
  background-color: #ccc;
}

.paused.hot {
  background-color: #bbb;
}

.barchart {
  display: grid;
  margin: 0;
  grid-template-columns:
    [viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
  grid-auto-rows: 30px;
}

row {
  padding: 5px;
  box-sizing:border-box;
  grid-column: container;
  grid-row: span 4;
  line-height: 120px;
  text-align: center;
  width: 0%;
  animation: expand 1.2s ease forwards;
  /* see animation "expand" below */
}

timerow {
  grid-column: container;
  grid-row: span 1;
  line-height: 14px;
  margin:0 5px;
  text-align: center;
  visibility: hidden;
  animation: 1.3s blendin; /* see animation "blendin" below */
  animation-fill-mode: forwards;
  margin-top: -15px;
  position: relative;
}

timerow a {
  position: absolute;
  height: 25px;
  width: 44px;
  font-size: 0.8em;
  color: #919191;
  background: #fff;
  transform:translateX(-50%);
}

tag {
  grid-column: container;
  padding-top: 8px;
  font-size: 0.8em;
  color: #919191;
}

/* Big-Screen Design */
@media screen and (min-width: 768px) {
  .barchart {
    margin-left: -4.5em;
    grid-template-columns:
      [viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
  }

  tag {
    grid-column: axis-start/container-start;
    grid-row: span 4;
    line-height: 120px;
    padding: 0;
    text-align: center;
  }

}

/* intro animation */
@keyframes expand {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes blendin {
  99% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}


row:nth-child(4) {
  animation-delay: .1s;
}

row:nth-child(6) {
  animation-delay: .2s;
}

<div class="barchart">
  <tag>Workday</tag>

  <row>
    <a style="width:28.9444444444%;" class="block cool">19deg</a>
    <a style="width:63.805555555%;" class="block hot">21deg</a>
    <a style="width:6.25%;" class="block hot">22deg</a>
  </row>

  <timerow>
  <a style="left:calc((28.9444444444 + 0.5/2)*1%);">07:30</a>
  <a style="left:calc((28.9444444444 + 63.805555555 + 0.5 + 0.5/2)*1%);">22:30</a>
  </timerow>

  <tag>Weekend</tag>
  <row>
    <a style="width:44%;" class="block cool">16deg</a>
    <a style="width:16%;" class="block paused hot">21deg</a>
    <a style="width:38.5%;" class="block paused cool">18deg</a>
  </row>
  
  <timerow>
  <a style="left:calc(44% + 0.5%/2);">00:00</a>
<a style="left:calc(44% + 16% + 0.5% + 0.5%/2);">00:00</a>
  </timerow>
  
</div>

与 CSS 中的 % 水平对齐

Align horizontally with % in CSS

css

alignment

text-alignment