Clever Geek Handbook

Q: How do I distribute the items evenly?

I have 3 items. In spaces (idk if the range is better than a div for this) I want to show on the same line, evenly spaced.

Thanks in advance!

.icons span{
   justify-content: center;
    margin: 20px 50px; 
    float: left;
    border-color: black;
    border-width: 2px;
    
}
      

        
        
        
      

    
 <div class="icons">
            <span>
                <h1>Honest</h1>
            </span>
            <span>
                <h1>Accurate</h1>
            </span>
            <span>
                <h1>Reasonable</h1>
            </span>
Run codeHide result


+3


source to share


4 answers


I'd rather do it with an unordered list, use the text align center, display: inline-block, and use padding in the list to make the even space between them.



.row{
text-align: center;
}
ul{
text-align: center;
margin: 0 auto;
}
li{
text-align: center;
display: inline-block;
padding: 0px 10px;
}
      

        
        
        
      

    
<div class="row icons">
    <ul>
        <li><h1>text1</h1></li>
        <li><h1>text2</h1></li>
        <li><h1>text3</h1></li>
    </ul>
</div>
Run codeHide result


+1


source


Add display: flex;

and justify-content: space-between;

in the classroom .icons

. In .icons span

remove the left / right field value.



.icons {
  display: flex;
  justify-content: space-between;
}

.icons span{
    margin: 20px 0px; 
    float: left;
    border-color: black;
    border-width: 2px;  
}
      

        
        
        
      

    
<div class="icons">
  <span>
    <h1>Honest</h1>
  </span>
  <span>
    <h1>Accurate</h1>
  </span>
  <span>
    <h1>Reasonable</h1>
  </span>
</div>
Run codeHide result


+1


source


You can use flexbox

    .icons {
        display: flex;
    }
    .icons span{
       justify-content: center;
        margin: auto; 
        float: left;
        border-color: black;
        border-width: 2px;

    }

    <div class="icons">
        <span>
            <h1>Honest</h1>
        </span>
        <span>
            <h1>Accurate</h1>
        </span>
        <span>
            <h1>Reasonable</h1>
        </span>
    </div>
0


source


Without flex, the easiest messy way is to just use percentage widths on inline blocks:

.icons {
  text-align:center;
}

.icons span{
  display:inline-block;
  width:32%;
}
0


source






More articles:


All Articles