My previous answer showed a frankly outdated method (it still works, there are just better ways to achieve this). For that reason, I’m updating it to include a more modern, flexbox solution.
See support for it here; in most environments, it’s safe to use.
This takes advantage of:
display: flex
: Display this element with flexbox behaviourjustify-content: center
Align the inner elements centrally along the main axis of the containerflex-wrap: wrap
Ensure the inner elements automatically wrap within the container (don’t break out of it)
Note: As is usual with HTML & CSS, this is just one of many ways to get the desired result. Research thoroughly before you choose the way that’s right for your specifications.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block {
background: green;
height: 100px;
width: 100px;
margin: 10px;
}
<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>
Original Answer
You could apply the style text-align:center;
to your container and display your .block
s as inline-block elements:
.container {
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block {
background: green;
height: 100px;
width: 100px;
display:inline-block;
margin: 10px;
}
<div class="container">
<div class="block">1. name of the company</div><!--
--><div class="block">2. name of the company</div><!--
--><div class="block">3. name of the company</div><!--
--><div class="block">4. name of the company</div><!--
--><div class="block">5. name of the company</div><!--
--><div class="block">6. name of the company</div><!--
--><div class="block">7. name of the company</div><!--
--><div class="block">8. name of the company</div>
</div>
Here’s an updated Fiddle
Notice I’ve commented out the white-space between your <div>
s. Because the elements are now displayed inline, your spaces will be acknowledged. This is one of many ways to ‘fight the space’.