在可变宽度的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;
 }

但是在屏幕截图中，不同部门的文字会有不同的 margin-right 。

我该如何解决这个问题？

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;    
}