I have been pondering whether it is possible to create a row of blocks that never stack on top of each other and adjust line-height so that text always stays centered in those blocks, regardless of the amount of content (and when necessary, adjusting the block heights themselves). I am envisioning something similar to the code snippet below:
ul
{
padding: 0;
margin: 0;
}
li
{
float: left;
list-style-type: none;
}
li a
{
display: block;
height: 60px;
width: 60px;
background-color: #009ec3;
color: white;
margin: 0 2px 2px 0;
line-height: 60px;
text-align: center;
}
li a:hover
{
color: white;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
<li>
<a href="#">Item 4</a>
</li>
<li>
<a href="#">Item 5</a>
</li>
<li>
<a href="#">Item 6</a>
</li>
<li>
<a href="#">Item 7</a>
</li>
<li>
<a href="#">Item 8</a>
</li>
<li>
<a href="#">Item 9</a>
</li>
<li>
<a href="#">Item 10</a>
</li>
<li>
<a href="#">Item 11</a>
</li>
<li>
<a href="#">Item 12</a>
</li>
<li>
<a href="#">Item 13</a>
</li>
</ul>I attempted using Bootstrap's .col-md-1 class but it only supports up to 12 blocks and I need at least 13 or more. Is there a way to accomplish this in Bootstrap and if so, how would I go about doing it?
Edit: I am striving to center the text within the category buttons and initially the previous stylesheet utilized the flexbox property for this purpose (since line-height does not work well for multiple lines of text). The challenge with flexbox is that it lacks compatibility with older browser versions, including IE9. Can anyone advise on how to resolve this issue within the following code referenced in this JSFiddle?