Question

我正在制作一个基于CSS的汉堡菜单按钮，我注意到<span>栏默认为垂直居中。使用条形图边距检查和游戏可使元素垂直居中。

但是，如果我尝试相同的代码并将<button>替换为<div>，则不会再垂直对齐。

.toggle-btn {
  display: block;
  background: #eee;
  border: none;
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 20px auto 30px;
}
.toggle-btn .bar {
  display: block;
  background: #000;
  width: 24px;
  height: 3px;
  margin: 0 auto;
}
.toggle-btn .bar + .bar {
  margin-top: 5px;
}
p {
  margin: 0;
  text-align: center;
}

<p>this is a button</p>
<button class="toggle-btn">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<p>this is a div</p>
<div class="toggle-btn">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

这对我来说是全新的，似乎没有任何浏览器默认的CSS似乎导致这种情况。我觉得我错过了一些明显的东西。

我很好奇这是怎么发生的。是什么原因导致<button>内的条形垂直居中？

Answer 1

这段代码可以解决问题

.toggle-btn .bar + .bar {
  margin-top: 5px;
}

它向第二和第三个栏添加margin-top。

Answer 2

这是<button>元素的默认属性。如果您在html <button>标记内写入任何内容，则会垂直居中显示。我在下面添加了一个示例。

.button-element{
 width:200px;
 height:200px;
 border:1px solid #000;
 background-color:yellow;
}

.button-child{
width:100px;
border:1px solid #000;
}

<button class="button-element">
  <span class="button-child"></div>
</button>

Answer 3

默认情况下，引导程序会垂直保留汉堡包菜单。所以，

.toggle-bar{ float:"top"; }

float:top **might help fix this.**

汉堡菜单按钮中的条形图是垂直居中的，没有CSS

3 个答案: