CODEWITHSUNDEEP
htmlcss
Ryan
Ryan

Reputation: 151

Q: How do I space elements evenly?

I have 3 elements In spans (idk if span is better than div for this) that I want to show on the same line spaced out evenly.

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>

Upvotes: 3

Views: 541

Answers (4)

user2464424
user2464424

Reputation: 1616

Without flex, the easiest dirty way is by simply using width percentages on inline-blocks:

.icons {
  text-align:center;
}

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

Upvotes: 0

NinoLopezWeb
NinoLopezWeb

Reputation: 151

Add display: flex; and justify-content: space-between; to your .icons class. In .icons span, remove your left/right margin 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>

Upvotes: 1

Alex Bieg
Alex Bieg

Reputation: 365

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>

Upvotes: 0

PenAndPapers
PenAndPapers

Reputation: 2108

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

.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>

Upvotes: 1

Related Questions