Question

我有两个盒子，每个盒子的中心都有一些文字。问题是，当有两行文本时，文本不再处于居中状态。

文本的定位由以下CSS完成，因为框具有悬停效果：

margin: 50% 0 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);

有关如何使文本始终居中的任何想法，即使有2行或更多行文本？

谢谢！

Answer 1

可悲的是，AFAIK使用CSS scale()的元素无法移动其他兄弟元素，因此在本演示中我只专注于垂直和水平对齐一个元素并且它是＆＃39 ; s text-content：

＆＃13;

.block{
  background: none 50% / cover; 
  display:    table;
  height:     480px;
  width:      360px;
}
.caption{
  position:       relative;
  text-transform: uppercase;
  vertical-align: middle;
  background:     rgba(0,0,0,0.4);
  text-align:     center;
  font-size:      1.25em;
  display:        table-cell;
  color:          #fff;
}

＆＃13;

<div class="block" style="background-image:url(http://placehold.it/300x190)">
  <div class="caption">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor<br>sit amet<br></p>
  </div>
</div>

＆＃13;

现在，我使用了40px的硬编码值来提升标题。
相同的值被添加到其下面的绝对 description 文本元素的margin-top（警告：希望您可以控制描述文本的长度，以便它不会溢出整个元素父级高度...）：

＆＃13;

*{margin:0; padding:0;}



.block{
  background: none 50% / cover; 
  display:    table;
  height:     480px;
  width:      360px;
  float:      left;
}
.caption{
  position:       relative;
  text-transform: uppercase;
  vertical-align: middle;
  background:     rgba(0,0,0,0.4);
  text-align:     center;
  font-size:      1.25em;
  display:        table-cell;
  color:          #fff;
}
.caption h2{
  transition:     0.5s;
  transform:      translate3d(0, 0, 0);
  padding: 15px;
}
.caption p{
  position:absolute;
  width:100%;
  padding-top: 15px;
  margin-top:  -40px; /* (same value*) */
  transition:     0.5s;
  transform:  scale(0);
}
.caption p:before{ /* thin white line */
  background: #fff;
  position:   absolute;
  content:    "";
  margin:     0 auto;
  height:     1px;
  width:      15%;
  right: 0; left: 0;top: 0;  
}
.block:hover h2{
  transform: translate3d(0, -40px, 0); /* (same value*) */
}
.block:hover p{
  transform:  scale(1);
}

＆＃13;

<div class="block" style="background-image:url(http://topwalls.net/wallpapers/2012/04/flame-nebula-Space--480x360.jpg)">
  <div class="caption">
    <h2>Centered no matter how much text </h2>
    <p>Lorem ipsum dolor<br>sit amet<br>qwer<br>ASDF</p>
  </div>
</div>

<div class="block" style="background-image:url(http://placehold.it/300x190)">
  <div class="caption">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor<br>sit amet<br></p>
  </div>
</div>

＆＃13;

请注意，我已删除<img>元素，因此您不会依赖该图片大小，因为它可能会弄乱您的内容。相反，它是一个完全覆盖cotnainer块元素的背景图像。如果您想让这些父母做出回应，只需使用%代替尺寸（W / H）而不是px。

中心2行文本框

1 个答案: