Demsaas Demsaas - 1 month ago 8
CSS Question

text of li in center?

I got

ul
with
li
and i wanna make
li
smaller, I did it with
height:30px
but now text is not in middle of
li
:

enter image description here

How to fix it?



.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

Add line-height: 30px; in your .property_item class to get after it

.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>

Comments