页面顶部的垂直对齐不起作用答案

【问题标题】：Vertical-Alignment on top of the page not working页面顶部的垂直对齐不起作用
【发布时间】：2019-01-21 20:56:43
【问题描述】：

我正在使用 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 一样在页面中心对齐。

编辑：问题似乎是一个弹性容器，它基本上看起来像这样：

< 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

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

【问题讨论】：

能否也显示父元素的css？
我添加了你要求的部分。
你试过去掉填充吗？
删除填充没有帮助
同一元素上没有重叠样式？

标签： html css

【解决方案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>

【讨论】：