[問題] 如何將區塊水平置中

[qazsd (珍惜當下)]

<div id="div1">
  <div id="div2">
            █ █ █ █ █
            ▇ ▇ ▇ ▇ ▇
                  ▇
  </div>
</div>

請教一下版上前輩

要將第三列的方塊至左對齊如下圖：
<div id="div1">
  <div id="div2">
            █ █ █ █ █
            ▇ ▇ ▇ ▇ ▇
            ▇
  </div>
</div>

如果寫成<div id="div2" style="text-align:left;">
則會變成三列都靠左對齊，如下圖：

<div id="div1">
  <div id="div2">
█ █ █ █ █
▇ ▇ ▇ ▇ ▇
▇
  </div>
</div>

有沒有什麼方法可以解決？
謝謝！

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.124.165.65
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1505107738.A.3E9.html
→ dinos: #div2{width:xxx;margin:x auto;text-align:left;}
→ qazsd: div1都不用設定嗎？
推 oToToT: flex(?
→ miyabichiku: text-align-last
推 Qiqi: 用你最後一個結果，再加上把div1的寬度縮小後並置中就可以了
推 shter: 不能幫 div1 加個 padding 嗎
推 idareyou: https://jsfiddle.net/kos0616/0kvpr6hg/1/
→ idareyou: 基於dinos的方式大概會是像這樣