将 CSS 图标与文本对齐

Question

我在CSS中创建了一个关闭按钮，我正在努力与常规文本对齐。它的包含 span 元素似乎与相邻文本对齐，但与子div 不对齐。

<a class="event-filter button" href="#">Filter name
  <span class="close-button">
    <div class="menu-bar menu-bar-top"></div>
    <div class="menu-bar menu-bar-bottom"></div>
  </span>
</a>
.close-button {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  z-index: 15;
  top: 0;
  left: 0;
  padding: 0;
}
.close-button:hover {
  cursor: pointer;
}
.close-button .menu-bar {
  position: absolute;
  border-radius: 2px;
  width: 100%;
  border: 1px solid grey;
}
.close-button .menu-bar-top {
  border-bottom: none;
  top: 0;
  transform: rotate(45deg) translate(8px, 8px);
}
.close-button .menu-bar-bottom {
  border-top: none;
  top: 22px;
  transform: rotate(-45deg) translate(7px, -7px);
}

http://codepen.io/ourcore/pen/vgXxQG

Answer 1

删除display: block并将关闭按钮与.close-button类上的vertical-align: middle对齐。这是一个演示。

设置display: block将导致关闭图标换行。 inline-block的行为类似于内联元素，但允许您设置宽度和高度。

修复后，图标在同一行上，但未对齐。 vertical-align: middle将按钮与文本居中对齐（垂直）。

Answer 2

当垂直对齐文本时，行高是你的朋友：

a {
  padding: 10px;
  background-color: #f3f3f3;
  color: grey;
  line-height: 1em;
  text-decoration: none;
}
.close-button {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  z-index: 15;
  top: -2px; /* tweeked your placement a little */
  left: 0;
  padding: 0;
  &:hover {
      cursor: pointer;
    }
}

将锚点的行高设置为关闭框的高度将使文本在该空间中垂直居中。