垂直对齐和CSS网格关系

时间:2018-04-27 14:35:52

标签: html css css3 flexbox css-grid

垂直对齐和CSS网格如何协同工作?我有一个元素紧挨着需要在中间准确对齐的元素。见下文:



<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>
&#13;
alphabet
&#13;
&#13;
&#13;

在示例中,我将vertical-align: middle;设置为<span>,尝试将A字符对齐在三个列表项的中间。 I referred to the vertical align documentation它说:

  

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

     

在其包含行内垂直对齐内联元素框   框。例如,它可以用于垂直定位img   一行文字......

因为我使用<section>标签是因为我只能在内联元素容器中使用垂直对齐而不是{{1}}?

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

1 个答案:

答案 0 :(得分:2)

不,如果没有内联行框,vertical-align将无效。

在这种情况下,您已将span作为flex-child,并且有效地删除了span的 inline 性质。

我建议alphabet范围内的flexbox。

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;