CODEWITHSUNDEEP
htmlcss
vtarbinskyi
vtarbinskyi

Reputation: 95

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>

Upvotes: 0

Views: 52

Answers (1)

Hitesh Misro
Hitesh Misro

Reputation: 3461

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>

Upvotes: 1

Related Questions