一起使用“valign-wrapper”和“right-align”

Question

Materialise-CSS：valign-wrapper和right-align可以在一个h5标签中一起使用吗？我所观察到的，直到现在，当它们一起使用时，h5内的文本是垂直对齐的，但没有对齐到右边。

我希望我的文字既垂直又对齐。

如果您知道如何实现这一点，请告诉我。

TIA Jagan

Answer 1

使用Flexbox

.parent {
    height: 300px;
    width: 300px;
    background: red;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

<div class="parent">
  <h5 class="child">Hi this is testing</h5>
</div>

Answer 2

valign包装器使用显示器flex。所以只需添加justify-content：flex-end;在你正在使用v-align的div类中对齐。这是jsfiddle中的代码

还有很多其他方法可以做到这一点。其中之一是，使用valign包装器作为垂直中心并使它们相对，h5为绝对和右：0使其正确对齐。这是jsfiddle code

另一个是，你可以使用make parent div作为display：table和h5作为display：table-cell。以下是片段： -

.heading{


display: table-cell;
  vertical-align: middle;
text-align:right;
}

<div style="height:300px; width:300px;background:red;display:table">
<h5 class="heading">Hi this is testing</h5>
</div>

Answer 3

使用justify-content来.child：

.child {
    justify-content: flex-end;
}