bonaca bonaca - 7 months ago 12
HTML Question

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.

Answer

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>

Comments