html - 页面顶部的垂直对齐不起作用

Question

我正在使用 wordpress 主题。 我希望页面上的标题在页眉下方对齐。但是它不起作用。

'vertical-align:top' 不起作用，什么也没有发生:我有一个页面有 h1-text 和 h4-text，h4 在页面的中心正确对齐，而我希望 h1 在页面的中心对齐页面顶部。我知道我需要对放置 h1 的 div 进行寻址。

.module_row_0 .module_column_0.tb_27_column.module_column > div.tb-column-inner, .module_row_0 .module_column_0.tb_27_column.module_column > .tb_holder {

  background-repeat: repeat;
  background-attachment: scroll;
  background-position: center center;
  padding: 50px;

.headlines{
  display: inline-block;
  vertical-align: top;
}

和相应的 html 部分:

< div class="tb-column-inner">


< !-- module text -->
< div id="text-27-1-0-0" class="module module-text text-27-1-0-0 headlines repeat  " data-id="e154311">
<!--insert-->

    <h3>&nbsp;</h3>
 < h1>Some Text</h1>
 < hr>
 < h1>&nbsp;</h1>        </div>
 < !-- /module text -->

...

我希望 h1 在页面顶部对齐，此时它像 h4 一样在页面中心对齐。

编辑:问题似乎是一个 flex 容器，它基本上是这样的:

< div> //row
  < div id="content_area"> // column with flex-container
    < div id="headlines"> headline 1 //should be at the top of the page but is centered
    < div> headline 4 //is centered and should stay like that

是否可以不移除 flex 容器？ align-self:flex-start; 不起作用，使所有内容在顶部对齐并对齐 h4-text 也不起作用。

Answer 1

不确定为什么 vertical-align: top; 对你不起作用，但你应该能够通过将 position 设置为 来获得相同的结果absolute 和 top 到 0%。确保父元素的 position 设置为 relative，否则子元素可能会退出其父元素。

.parent {
  background: yellow;
  width: 200px;
  height: 150px;
  position: relative;
}

.child {
  background: red;
  position: absolute;
  top: 0%;
  left: 50%;
  width: 50px;
  height: 50px;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

<div class="parent">
  <div class="child"></div>
</div>