Question

Materialise-CSS：valign-wrapper＆amp;右对齐在一个单独的h5标签中一起使用？我所观察到的，直到现在，当它们一起使用时，h5内的文字是垂直对齐的，但没有对齐到右边。

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

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

TIA 贾根

Answer 1

valign包装器使用display 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 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

也使用justify-content至.child：

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

Answer 4

在使用valign-wrapper作为标签时，它会生成该元素：

.valign-wrapper{
display:flex; 
align-items:center;
}

您可以添加以下css使其居中对齐：

.valign-wrapper{
justify-content:flex-end;
}

使用＆＃34; valign-wrapper＆＃34; ＆安培; ＆＃34;右对齐＆＃34;一起

4 个答案: