在可变宽度的div内对齐文本

时间:2014-05-06 18:43:41

标签: html css css3

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

enter image description here enter image description here

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

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

.pillar-text h1 {这就是你的CSS标题,但是你的文本似乎是其中一个使用h1而另一个使用h2。

将它们全部更改为h1以应用右边距或为h2定义内容。

答案 1 :(得分:0)

因为你有position:absolute,你的保证金权利:30%是窗口的30%,而不是div

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