對齊可變寬度的div內的文本

Question

我有4個分區，每個分區都包含一些文本。
JsFiddle

HTML

<div id="pillar1"> 
    <div class="pillar-text"> 
    <h1>aaaaaa aaaaa aaavvvvvvvvvvvv aaaabbbbbbbb bbbba aaaa</h1> 
    <h2>Workshop</h2> 
    </div> 
</div> 

CSS

.pillar-text h1 { 
    position: absolute; 
    margin-right: 60%; 
    opacity: 0; 
    -webkit-transition: opacity 1.5s ease-in; 
} 

但是如截圖所示，文本在不同部門獲得不同的保證金。

我該如何解決這個問題？

Answer 1

.pillar-text h1 {這就是你的CSS的標題，但是你的文本似乎是使用h1作爲其中的一個，而使用h2作爲另一個。

將它們全部更改爲h1以應用右邊距或爲h2定義一些內容。

Answer 2

，因爲你有position:absolute，你的保證金右：30％是窗口的30％，而不是DIV

.pillar-text h1 { 
    position: absolute; 
    margin-right: 30%; 
    opacity: 0; 
    -webkit-transition: opacity 1.5s ease-in;  
}