垂直对齐和CSS网格关系 [英] vertical align and CSS grid relationship

问题描述

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

How do vertical align and CSS grid work together? I have an element that is next to elements that need to be aligned exactly in the middle. See below:

.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字符.我提到了垂直对齐文档，它说:

In the example I have alphabet set to vertical-align: middle; as an attempt to align the A character right in the middle of the three list items. I referred to the vertical align documentation and it says:

vertical-align属性可以在两种情况下使用:

The vertical-align property can be used in two contexts:

使内联元素的框在其包含的行内垂直对齐盒子.例如，它可以用于将img垂直放置在一行文字...

To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an img in a line of text...

因为我使用的是< span> 标记，是因为只能在行内元素容器中使用垂直对齐，而不能在< section> 中使用吗?

Since I'm using a <span> tag is it because I can only use vertical align in an inline element container and not a <section>?

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

Is vertical align not the correct way to align the A character in the middle with the list elements?

推荐答案

否，当没有嵌入式行框时， vertical-align 将不起作用.

No, vertical-align will not work when there is no inline line-box.

在这种情况下，您已将跨度设置为flex-child，并有效地删除了跨度的 inline 性质.

In this case, you've made the span a flex-child and, effectively, removed the inline nature of the span.

我建议在 alphabet 跨度上使用flexbox.

I'd suggest flexbox on the alphabet span.

.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>

这篇关于垂直对齐和CSS网格关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！