When trying to stretch a span to the width of the div, nothing happened. And text-align, which works only for text, did not help, and inline-block, too.

How can this problem be solved?

<div class="iconBox"> <span align="center" class="glyphicon glyphicon-search" aria-hidden="true"></span> <span align="center" class="glyphicon glyphicon-hdd" aria-hidden="true"></span> <span align="center" class="glyphicon glyphicon-tasks" aria-hidden="true"></span> <span align="center" class="glyphicon glyphicon-saved" aria-hidden="true"></span> </div> 
 .iconBox { width: 50%; margin: auto; } .iconBox span { margin: auto; }

    2 answers 2

     .iconBox { width: 50%; margin: auto; background: #646464; display: table; } .glyphicon { background: #F0F4F8; display: table-cell; } 
     <div class="iconBox" align='center'> <div class="glyphicon glyphicon-search" aria-hidden="true">123</div> <div class="glyphicon glyphicon-hdd" aria-hidden="true">456</div> <div class="glyphicon glyphicon-tasks" aria-hidden="true">789</div> <div class="glyphicon glyphicon-saved" aria-hidden="true">012</div> </div>

      More as an option

       .iconBox { width: 50%; margin: auto; border: 1px solid #555; display: flex; justify-content: space-between; } .glyphicon { border: 1px solid #ccc; width: 100%; } 
       <div class="iconBox" align='center'> <div class="glyphicon glyphicon-search" aria-hidden="true">123</div> <div class="glyphicon glyphicon-hdd" aria-hidden="true">456</div> <div class="glyphicon glyphicon-tasks" aria-hidden="true">789</div> <div class="glyphicon glyphicon-saved" aria-hidden="true">012</div> </div>

      • After so much time, I use flex myself and it’s preferable to table :) - Mr. Black