股利行除了第一個

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%; 
}