Question

我知道这已被回答了一千次，但我发现似乎没有任何效果。我有全宽图片，用导航窗口调整大小。然后我在中心有一个带有文字的盒子。图像框和类型正在按预期调整大小，但我似乎无法使类型以多行文本为中心。这是我的HTML：

<div class="block-full">
    <div class="info-box-full">
        <div class="slide-info">
            <span><?php echo $ss_slide_post_title?><br><?php echo $ss_slide_post_desc;?></span>
        </div>
    </div>
<img src="<?php echo $image_link[0];?>" alt="">
</div>

这是我的CSS：

.block-full {
    height: 0;
    overflow: hidden;
    padding-bottom: 45%;
    position: relative;
    text-align: center;
    width: 100%;
}
.info-box-full {
    background-color: rgba(255, 255, 255, 0.8);
    height: 26%;
    margin-left: 40%;
    position: absolute;
    top: 37%;
    vertical-align: middle;
    width: 20%;
    z-index: 9999;
}
.slide-info {
    font-size: 1vw;
    line-height: 1;
    margin-top: 25%;
    text-align: center;
}
span {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
}

感谢您的帮助！

Answer 1

你想要的是style =＆＃34; text-align：center＆＃34;在html标签内部，它将根据容器的大小相对地将标签内的所有文本居中。

Answer 2

使用Flexbox。

浏览器支持：http://caniuse.com/#search=flexbox

快速入门：http://css-tricks.com/snippets/css/a-guide-to-flexbox

＆＃13;

* { margin:0; padding:0 }

figure {
  display: flex;
  background: url('http://i.imgur.com/urlCI95.jpg');
  background-size: cover;
  height: 200px;
}

figcaption {
  color: white;
  text-align: center;
  margin: auto;
}

＆＃13;

<figure>
  <figcaption>Vertically centered text.</figcaption>
</figure>

＆＃13;

可编辑演示：http://jsbin.com/fagopu/2

中心类型垂直在可调整大小的div中

2 个答案: