基金会中心多列成行

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>

Answer 2

您可以将行包装在另一行/列中，然后使用提供的实用程序类将该列的内容居中。

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