同时使用"valign-wrapper“和"right-align”

Question

Materialize-CSS: valign-wrapper和right-align可以在单个h5标记中一起使用吗？到目前为止，我观察到的是，当它们一起使用时，h5中的文本是垂直对齐的，而不是右对齐的。

我想我的文本是既垂直和右对齐。

如果你知道如何做到这一点，请让我知道。

TIA Jagan

Answer 1

使用display flex验证包装器。因此，只需添加justify-content: flex-end；就可以在使用v-align的div类中右对齐。以下是jsfiddle中的代码

有许多其他方法可以做到这一点。其中之一是，使用valign wrapper作为垂直中心，并将它们设置为相对，并将h5设置为绝对和right: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 2

使用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 3

也可以使用.child的justify-content：

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