时间戳

首页 > 解决方案 > 页面顶部的垂直对齐不起作用

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

问题描述

我正在使用 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-text 也不起作用。

标签： htmlcss

解决方案

不知道为什么vertical-align: top;不适合你，但你应该能够通过设置positiontoabsolute和topto来获得相同的结果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>

推荐阅读