Question

我正在处理一个wordpress主题。我希望页面标题与标题下方的顶部对齐。但是它不起作用。

“ vertical-align：top”不起作用，什么也没发生：我有一个带有h1文本和h4文本的页面，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文本也没有对齐。

Answer 1

不确定为什么vertical-align: top;对您不起作用，但是您应该可以通过将position设置为absolute，将top设置为{{ 1}}。确保将父元素的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%);
}

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

1 个答案: