vertical align and CSS grid relationship

问题

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>

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:

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

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

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

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

回答1:

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

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

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>

来源：https://stackoverflow.com/questions/50064710/vertical-align-and-css-grid-relationship

标签

html

css

flexbox

css-grid