垂直对齐和CSS网格关系

kawnah 发表于 Dev

Kawnah

垂直对齐和CSS网格如何协同工作？我的元素旁边的元素需要精确对齐。见下文：

.alphabet {
  font-size: 80px;
  /*Below is not working...why?*/
  vertical-align: middle;
}

.letter-grid {
      display: flex;
}

.filter-item-grid {
    display: grid;
    display: -ms-grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: space-between;
}

.letter-grid__filter-item {
    display: grid;
    display: -ms-grid;
    grid-template-rows: repeat(3,auto);
    grid-auto-flow: column;
    margin-left: 24px;
}

<section class="letter-grid">
  <span class="alphabet">a</span>
    <div class="filter-item-grid">
      <div class="letter-grid__filter-item">
        <h3 class="letter-grid__filter-title">
          <a href="#">Example 1</a>
        </h3>
        <h3 class="letter-grid__filter-title">
          <a href="#">Example 2</a>
        </h3>
         <h3 class="letter-grid__filter-title">
          <a href="#">Example 3</a>
         </h3>
      </div>
    </div>
</section>

在示例中，我alphabet设置vertical-align: middle;为尝试在三个列表项的中间对齐A字符。我提到了垂直对齐文档，它说：

vertical-align属性可以在两个上下文中使用：

将嵌入式元素的框在其包含的线框内垂直对齐。例如，它可以用于将img垂直放置在一行文本中...

因为我使用的是<span>标签，因为我只能在嵌入式元素容器中使用垂直对齐，而不能在<section>？中使用垂直对齐？

垂直对齐不是将中间的A字符与列表元素对齐的正确方法吗？

保利

否，vertical-align当没有内联线框时将不起作用。

在这种情况下，您已将跨度设为弹性子级，并有效地删除了跨度的内联性质。

我建议在alphabet跨度上的flexbox 。

.alphabet {
  font-size: 80px;
  display: flex;
  align-items: center;
}

.letter-grid {
  display: flex;
}

.filter-item-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: space-between;
}

.letter-grid__filter-item {
  display: grid;
  display: -ms-grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  margin-left: 24px;
}

section * {
  border: 1px solid lightgrey;
}

<section class="letter-grid">
  <span class="alphabet">a</span>
  <div class="filter-item-grid">
    <div class="letter-grid__filter-item">
      <h3 class="letter-grid__filter-title">
        <a href="#">Example 1</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Example 2</a>
      </h3>
      <h3 class="letter-grid__filter-title">
        <a href="#">Example 3</a>
      </h3>
    </div>
  </div>
</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。