垂直居中一个块标题

Question

我创建了一个简单的基于flex的表。

＆＃13;

＆＃13;

section {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  margin: 0;
  background-color: green;
}

h2, ul {
  width: 50%;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

h2 {
  text-align: right;
  vertical-align: middle;
}
  
h2 {
  background-color: blue;
}

ul {
   background-color: yellow;
}

＆＃13;

<section>
  <h2>Heading</h2>

  <ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>baz</li>
    <li>baz</li>
  </ul>
</section>

＆＃13;

＆＃13;

＆＃13;

首先，与我的本地项目中显示的内容相反，h2和ul子项不会在片段中占据该部分高度的100％。为什么呢？

主要问题：我希望h2块填充section及其文本垂直居中。我的目标是分别更改左右单元格的background-color。我设置了vertical-align选项，但它不起作用。为什么呢？

Answer 1

使用flex align（-items，-self）进行垂直对齐

＆＃13;

＆＃13;

section {
  align-items: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  margin: 0;
  background-color: green;
}

h2, ul {
  width: 50%;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

h2 {
  text-align: right;
  align-self: center;
}
  
h2 {
  background-color: blue;
}

ul {
   background-color: yellow;
}

＆＃13;

<section>
  <h2>Heading</h2>

  <ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>baz</li>
    <li>baz</li>
  </ul>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

要执行此操作，您必须使用display: flex上的h2，然后设置align-items: center和justify-content: flex-end，如果您想要正确的文字对齐。您还可以删除边距以使项目具有相同的高度。

section {
  display: flex;
  margin: 0;
  background-color: green;
}
h2,
ul {
  flex: 1;
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin: 0;
}
h2 {
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
}
ul {
  background-color: yellow;
}

<section>
  <h2>Heading</h2>

  <ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>baz</li>
    <li>baz</li>
  </ul>
</section>

Answer 3

需要定义行高

行高：100px;或者你需要什么在h2