css3 - 框中的中心2行文字

我有2个框，每个框的中心都有一些文字。问题是当有两行文本时，文本不再居中。

Here's an example

文本的位置由以下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);

关于即使两行或更多行文本也始终使文本居中的想法？

谢谢！

最佳答案

遗憾的是，AFAIK无法使用CSS scale()的元素移动其他同级元素，因此，在此演示中，我只专注于垂直和水平居中对齐一个元素及其文本内容：

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

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

现在，我使用了40px的硬编码值来移动标题。
相同的值将添加到其下面的绝对描述文本元素的顶部空白（注意：希望您可以控制描述文本的长度，以免溢出整个元素父代的高度...）：

*{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);
}

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

请注意，我已经删除了<img>元素，因此您将不必依赖该图像大小，因为它可能会弄乱您的内容。相反，它是一张背景图像，将完全覆盖cotnainer块元素。如果要让那些父母做出响应，只需使用%作为大小（W / H）而不是px。

关于css3 - 框中的中心2行文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29880082/