Div行除了第一行

Question

HTML代码：

<div ng-repeat="characteristic in test.testChar" class="row" >
<div class="col-xs-9 rec">
<div class="rec2" ng-bind-html="translateCharacteristicLabel('test',test.testChar[$index + 1].cell_header) | to_trusted"></div>
</div>           
</div>

CSS：

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    width: 100%;
}
.rec{
    font-size: 16px !important;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
    margin-left: 50%;
    clear: left;
}
.rec2{
    font-size: 16px !important;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
    clear: left;
}

通过上面的代码，我可以在下面创建设计：

正如您所看到的，TYPE文本略低于其他文本。我怎样才能完全一致？ （如同在一行中一样）

Answer 1

你可以在父容器上使用css属性text-align:center; line-heigth: 16px;来进行修复

Answer 2

如果我没有记错，您只需要添加：

justify-content: center;

到行。 如果这不起作用，您可以尝试

height: 100%;
display: inline-block;
vertical-align: middle;

你的rec2元素中的

如果您可以在jsfiddle / codepen中创建一个简单示例，那将会有所帮助，因此其他人可以更轻松地尝试您的代码

修改

您还可以一次性定义rec和rec2来保存代码行，如下所示：

.rec, .rec2 {
    font-size: 16px !important;
    text-transform: uppercase;
    display: inline-block;
    white-space: nowrap;
    clear: left;
}

然后添加rec的余量：

.rec {
    margin-left: 50%;
}