Reputation: 9301
<div id="linksbwrap">
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
<a class="linkb" href="">Lorem ipsum Lorem</a><br>
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
<a class="linkb" href="">Lorem ipsum Lorem</a><br>
...
</div>
css
#linksbwrap{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
How to set left margin of the first column to be the same as the right margin of the last column ?
And keep the links inside columns aligned left.
I tried:
#linksbwrap{
text-align:center;
}
but in this case links inside columns are also centered by itself.
Upvotes: 0
Views: 57
Reputation: 3467
I recommend using online css generators
like:
you can try different properties and find the best one for your problem.
Upvotes: 1
Reputation: 87313
Won't this work?
#linksbwrap {
display: inline-block;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
background:lightblue;
margin: 0 40px;
padding-left: 30px;
}
<div id="linksbwrap">
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
<a class="linkb" href="">Lorem ipsum Lorem</a><br>
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
<a class="linkb" href="">Lorem ipsum Lorem</a><br>
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
<a class="linkb" href="">Lorem ipsum Lorem</a><br>
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
</div>
Upvotes: 1
Reputation: 13998
Try to fix the width and keep it in the center place. So that it will give you the result like left and right margin are same.
#linksbwrap{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
margin:0px auto;
width:80%;
}
Upvotes: 2
Reputation: 5187
add this to your CSS
#linksbwrap {
display: flex;
justify-content: space-around;
}
This will leave equal space on the left of the 1st element and the right of the last element
Upvotes: 0