CODEWITHSUNDEEP
htmlcss
qadenza
qadenza

Reputation: 9301

how to center columns group

<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

Answers (4)

Navid Farhadi
Navid Farhadi

Reputation: 3467

I recommend using online css generators like:

CSS3Generator.com

you can try different properties and find the best one for your problem.

Upvotes: 1

Asons
Asons

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

Suresh Ponnukalai
Suresh Ponnukalai

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%;
}

DEMO

Upvotes: 2

Dhaval Chheda
Dhaval Chheda

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

Related Questions