CSS <li>не расширяется

Question

У меня есть <ul> список и внутри <li> У меня есть ссылка <a href="...">

Я хочу, чтобы содержимое <li> не зависело от содержимого и имело фиксированный размер.

Мой CSS

 ul.files {
    display: inline-block;
    padding: 0;
    margin: 0 auto;    
}

ul.files li {
    display: inline;

}


ul.files li a { 

    color: black;
    float: left;
    padding: 8px 15px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 3px;
    background-color: #ffffff;
}

Мой HTML

<ul class="files">
  <li>
    <a id="some_id" href="http">123</a>
  </li>
</ul>

Answer 1

Чтобы иметь возможность установить фиксированные width и height на <li>, вам необходимо изменить display: inline; на inline-block

ul.files li {
    display: inline-block;
    width: 150px;
    height: 150px;
} 

По центру текста

Для центрирования содержимого li вы можете использовать display: inline-flex

ul.files li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
}