Search code examples
htmlcssalignment

how to center multicolumn content keeping columns aligned left

I have three columns, aligned left, and need all distances to be the same:
- distances between columns
- left-right distances regarding the parent.

<div id="linkswrap">
<a class="link">123</a>
<a class="link">1234</a>
<a class="link">12345</a>
<a class="link">123456</a>
<a class="link">1234567</a>
<a class="link">12345678</a>
<a class="link">123456789</a>
</div>

css

#linkswrap{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    text-align:center;
    background:green;
}
.link{
  display:block;
  text-align:left;
  color:#ffffff;
}

I tried with text-align:center on linkswrap - doesn't work.

Also, if I say text-align:center on link the columns become centered itself, but I need links inside columns to stay aligned left;

jsfiddle is here

Solution

  • Use text-indent:36%; to do this. :)

    text-indent: 36%;

    fiddle here