Question

我试图在窗口的div内垂直和水平对齐文本，我希望它能在iPhone上的纵向和横向模式下工作。这是我的代码，但它不能很好地工作。

HTML：

<div class="mainTeaser">
    <img src="teaser.jpg" />
    <span class="teaserWrap">
        <span class="headline">TEXT</span>
        <span class="subline">TEXT</span>
    </span>
</div>

CSS：

.mainTeaser {
    position: relative;
}
.mainTeaser img {
    display: block;
    width: 100%;
}
.mainTeaser .teaserWrap {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

Answer 1

我建议使用背景图片代替background-size:cover，然后使用transform将文字居中。

您还需要将所有容器设置为height:100%，因此它会覆盖整个视口高度。

＆＃13;

html, body {
    height :100%;
    margin: 0;
}
.mainTeaser {
    position: relative;
    height :100%;
}
.mainTeaser {
    background: url("http://lorempixel.com/300/300/nature") center center no-repeat;
    background-size: cover;
}
.mainTeaser .teaserWrap {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: white;
}

＆＃13;

<div class="mainTeaser">
    <span class="teaserWrap">
        <span class="headline">TEXT</span>
        <span class="subline">TEXT</span>
    </span>
</div>

＆＃13;

Answer 2

对于绝对行为，它需要预定义的宽度和高度

在这个版本中看到下面我刚刚使用文本对齐中心制作了100％的绝对div宽度，它在固定大小上留下了更少的错误空间

＆＃13;

html,
body {
  height: 100%;
  min-height: 100%;
}
.mainTeaser {
  position: relative;
  height: 100%;
  background-color: red;
  width: 100%;
  text-align: center;
}
.align {
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 100%;
  height: 35px;
}
.mainTeaser img {
  display: block;
  width: 100%;
}
.mainTeaser .teaserWrap {}

＆＃13;

<div class="mainTeaser">
  <div class="align">
    <img src="teaser.jpg" />
    <span class="teaserWrap">
        <span class="headline">TEXT</span>
    <span class="subline">TEXT</span>
    </span>
  </div>
</div>

＆＃13;

如何在窗口中垂直和水平对齐文本？

2 个答案: