Question

我正在制作这个汉堡包。我试图了解如何在没有眼球的情况下精确计算杆的位置。汉堡包的高度为24px 所以我假设为了定位中间条，它将是高度的一半，所以12px（顶部：12px;）或者示例0.5em，但是看起来不是整个菜单的中心。（上图：10px看起来正确或0.625em）。

总的来说，有什么更好的方法来计算css中的任何东西？

http://codepen.io/anon/pen/Bjjqez

SELECT * FROM myTable WHERE Header1 LIKE 'apple*'
UNION ALL
SELECT * FROM myTable WHERE Header1 LIKE 'pear*'
UNION ALL
SELECT * FROM myTable WHERE Header1 LIKE 'apple*'

SASS

<div class="hamburger">
  <div class="hamburger__top"></div>
  <div class="hamburger__middle"></div>
  <div class="hamburger__bottom"></div>
</div>

Answer 1

Flexbox可以做到这一点....无需定位。

这里有几个选项。

＆＃13;

.hamburger {
  width: 3em;
  height: 1.5em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: 1em auto;
}
.hamburger div {
  background-color: red;
  height: .25em;
}
.around {
  justify-content: space-around;
  background: lightblue;
}
.between {
  justify-content: space-between;
  background: lightgreen;
}

＆＃13;

<div class="hamburger around">
  <div class="hamburger__top"></div>
  <div class="hamburger__middle"></div>
  <div class="hamburger__bottom"></div>
</div>

<div class="hamburger between">
  <div class="hamburger__top"></div>
  <div class="hamburger__middle"></div>
  <div class="hamburger__bottom"></div>
</div>

＆＃13;

Answer 2

将您的top: 0.5em替换为：

top: 50%;
transform: translateY(-50%);

根据我对其工作原理的理解，top: 50%会将元素的顶部向下移动一半。 translateY(-50%)然后将元素向上移动一半自己的高度，从而集中定位它。

示例：http://codepen.io/anon/pen/RrrqWP

计算汉堡包对象栏位置

2 个答案: