текст ли в центре?

Question

я получил ul с li и я хочу сделать li меньше, я сделал это с height:30px, но теперь текст не в середине li:

Как это исправить?

.properties_list .property_item 
 
    { 
 
     display:inline-block; 
 
     font-size:15px; 
 
    } 
 
    .properties_list 
 
    { 
 
     font-family: Verdana, Arial, Helvetica, sans-serif; 
 
     height: 30px; 
 
     text-align: left; 
 
    } 
 
    .property_item 
 
    { 
 
     margin-right: 3px; 
 
     height:30px; 
 
    }

<ul class="list-group properties_list treemenu"> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property1</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property2</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property3</li><li class="btn btn-active property_item list-group-item tree-empty">Property4</li><li class="btn btn-active property_item list-group-item tree-empty">Property5</li><li class="btn btn-active property_item list-group-item tree-empty">Property6</li><li class="btn btn-active property_item list-group-item tree-empty">Property7</li><li class="btn btn-active property_item list-group-item tree-empty">Property8</li></ul>

Answer 1

Добавить line-height: 30px; в вашем .property_item классе, чтобы получить после того, как

.properties_list .property_item { 
 
    display: inline-block; 
 
    font-size: 15px; 
 
} 
 
.properties_list { 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    height: 30px; 
 
    text-align: left; 
 
} 
 
.property_item { 
 
    margin-right: 3px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    border: 1px solid; 
 
    width: 100px; 
 
    text-align: center; 
 
}

<ul class="list-group properties_list treemenu"> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property1</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property2</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property3</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property4</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property5</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property6</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property7</li> 
 
    <li class="btn btn-active property_item list-group-item tree-empty">Property8</li> 
 
</ul>