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并将关闭按钮与vertical-align: middle类上的.close-button对齐。 Here is a demonstration

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

固定后，图标位于同一行但未对齐。 vertical-align: middle居中对齐（垂直）按钮和文本。

Answer 2

垂直对齐文本时，line-height是你的自由：

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;
    }
}

将锚点的线条高度设置为关闭框的高度，将文本垂直居中放置在该空间中。

将CSS图标与文本对齐

2 个答案: