css -居中显示3列布局<ul>

Question

我有一个通过调用API生成的清单--每个页面的清单限制为30个，每个列应该有10个清单。

​

​

目前，它看起来并没有居中，尤其是在更大的屏幕上。我尝试了空余:0自动，但没有任何工作。我可以手动完成，但该解决方案对于较大的屏幕是可行的，并确保它们具有响应性(在移动设备上变为2列，然后是1列)。我该如何纠正这个问题？

css：

#native {

 width: 100%;
 margin: auto;
 padding: 0;
 position: relative;
 left: 2%;
}

#native ul {
 list-style: none;
 display: inline-block;
 padding-right: 65px;
}


@media(max-width: 480px){
#native {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
   }
}

@media(max-width: 768px){
#native {
    left: 0;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
   }
}


 @media (min-width: 1600px)
 {
   #native {

    max-width: 1600px;

   }
   #native ul {

    padding-right: 150px;

   }
}

html/php：

<div id="native" class="margin-top-2x">  
    <ul>
        <?php 
           $i=1;
           foreach ( $model as $d ) { ?>
        <?php if ( !empty ( $d['id'] ) ): ?>
            <li>

                    <a href="<?php echo $this->createUrl ( 'frontend/detailedView' , array( 'id' => $d['id'] ) ) ?>"><?php echo ysUtil::truncate($d['title'], 45) ?></a>

                <br>
            </li>
            <?php endif; ?>
            <?php
            if ( ($i % 10) == 0 ) {
                echo "</ul>";
                echo (end ( $model['id'] ) == $d['id']) ? "" : "<ul>";
            }
            $i++;
            ?>
        <?php } ?>
</div>

Answer 1

这可以使用display flex来完成。

.wrapper {
    display: flex;
}
.column {
    flex: 0 0 33%; // column does not grow or shrink. but takes up 33% of the space
}

Answer 2

#native {
 display: flex;
 justify-content: center;
}