垂直居中一个块标题

时间:2016-08-10 17:24:22

标签: html css flexbox

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



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;
}

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

首先,与我的本地项目中显示的内容相反,h2ul子项不会在片段中占据该部分高度的100%。为什么呢?

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

3 个答案:

答案 0 :(得分: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;

答案 1 :(得分:1)

要执行此操作,您必须使用display: flex上的h2,然后设置align-items: centerjustify-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>

答案 2 :(得分:0)

需要定义行高

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