使用过渡使文本垂直居中



我正在使用flex和transition来尝试实现某些目标。

以前从未使用过flex,但认为它可能与我想要实现的目标配合得很好。

请看小提琴

我试图实现的是当您将鼠标悬停在框上时,底部栏覆盖框(这有效),标题和文本过渡到框的中心。这是一半的工作。

它们水平居中,但不是我想要的垂直居中。文本在中心应更靠近。

这甚至可能还是我做错了什么?

.html

<a href="#" class="box-link row">
  <div class="overbox row">
    <h4>This is a title</h4>
    <p>Lorem ipsum dolor sit amet, usu debet tation cu. Eam assum habemus dignissim ne</p>
  </div>    
</a>

.css

.box-link {
    display: flex;
    flex: 1 1 0px;
    flex-flow: row wrap;
    width: 19.8125rem;
    height: 19.8125rem;
    position: relative;
    overflow: hidden;
    background:red;
    text-align: center;
    border:1px solid red;
}
.box-link .overbox {
    align-items: center;
    justify-content: center;
    transition: 0.5s ease-in-out;
    background-color: rgba(255, 255, 255, 0.6);
    min-height: 15%;
    width: 100%;
    padding: 0.9375rem;
    position: absolute;
    top: 85%;
    left: 0;
    display: flex;
    flex-flow: row wrap;
}
.box-link:hover .overbox {
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
h4 {
  margin:0;
}

悬停时,由于填充声明,文本相对于容器略微右对齐。

有关说明,请从容器元素 ( .box-link ) 中删除overflow: hidden

演示


如果从.overbox中删除padding: 0.9375rem,则两个框都对齐,并且文本水平居中。

演示


弹性项没有更紧密地垂直居中的原因是因为在具有 flex-direction: row 的多行柔性容器上,柔性对齐由 align-content 属性控制,而不是align-items。这是你所拥有的:

.box-link .overbox {
    align-items: center;
    justify-content: center;
    ...
    ...
    ...
    display: flex;
    flex-flow: row wrap;
}

当交叉轴中有多条线时要使用的属性是 align-content

将此添加到您的 CSS 中:

.box-link .overbox {
    align-items: center;
    justify-content: center;
    align-content: center;       /* NEW */
    ...
    ...
    ...
    display: flex;
    flex-flow: row wrap;
}

演示


从规格:

8.3. 跨轴对齐:align-itemsalign-self属性

align-items设置弹性容器的所有项目(包括匿名弹性项目)的默认对齐方式。 align-self允许为单个弹性项目覆盖此默认对齐方式。

8.4. 包装柔性线:align-content 财产

align-content 属性在 当交叉轴上有额外空间时,柔性容器,类似于 justify-content如何对齐主轴内的各个项目。 请注意,此属性对单行弹性容器没有影响。

相关内容

  • 没有找到相关文章

最新更新