基金会中心多列成行

Question

我尝试将列中心排成一排.

有简单的代码:

<div class="row" style="background-color:black;">

      <div class="large-2 small-6 text-center radius panel left columns" id="days" style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="hours" style="opacity:0.8;margin-right:0.5%;"></div> 
      <div class="large-2 small-6 text-center radius panel left columns" id="minutes"style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="seconds" style="opacity:0.8;"></div> 
</div>

结果如下:

你可以看到,行的空间是黑色背景.如何将列居中排？

Answer 1

你可以使用偏移量

<div class="row" style="background-color:black;">    
      <div class="large-2 large-offset-2 small-6 text-center radius panel left columns" id="days" style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="hours" style="opacity:0.8;margin-right:0.5%;"></div> 
      <div class="large-2 small-6 text-center radius panel left columns" id="minutes"style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="seconds" style="opacity:0.8;"></div> 
</div>