Question

我希望有一个大图像，宽度为100％，高度约为屏幕的70％。在这张图片上，我想在这张图片的顶部显示一些文字，这个文字需要在图像的中间。 简而言之：如何在100％宽度的图像中将此文本水平和垂直居中？：

<div id="top-area">
<img src="img/startphoto.jpg" alt="background image #1" />
<p>Some text</p>
</div>



#top-area img{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#top-area p{
    position: relative;
    text-align: center;
    margin-top: 330px;

    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
}

我知道我使用margin-top来获取文本的水平位置，但这感觉就像错误的方式。有人得到了更好的建议吗？

Answer 1

您可以将position:absolute分配给img和p元素。然后，您可以在top:40%;元素上声明p以垂直集中它。我使用40%的原因是由于您使用的文字的大小。您可以使用50%然后使用javascript计算文本的高度并为其指定一个上部负边距。仅当文本高度动态变化时才需要这样做。

DEMO http://jsfiddle.net/fRbNe/

html, body {
    height: 100%;
}
#top-area {
    position: relative;
    height: 70%;
    width:100%;
}
#top-area img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#top-area p {
    margin:0;
    padding:0;
    text-align: center;
    top:40%;
    height: 100%;
    width:100%;
    position: absolute;
    color: white;
    font-family:'Montserrat', sans-serif;
    font-size: 3em;
}

Answer 2

这是您重构的代码。它使得顶部区域成为决定图像大小的区域，因为图像只是填充空间。然后将文本向左移动并将顶部区域大小的前50％移动到文本中心，然后将其翻译回p大小的50％。对于任何大小的图像和任何大小的文本，这都是一种可靠的方法。

<div id="top-area">
    <img src="http://ts2.mm.bing.net/th?id=H.4836061304389953&pid=1.7" alt="background image #1" />
    <p>Some text</p>
</div>

#top-area {
  position: relative;
  width: 100%;
  height: 70%;
}
#top-area img{
    width: 100%;
    height: 100%;
}

#top-area p{
    position: absolute;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
}

Codepen看它工作：http://cdpn.io/zFJgh

Answer 3

我相信Travis的答案需要浏览器支持背景大小，这仍然缺乏IE8。这样的东西应该可以工作，将图像和跨度放在div中：

div.largeImageContainer,
img.largeImage{
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}

div.largeImageContainer{
   top: 30%;
   text-align: center;
}

span.largeImageText{
   position: relative;
   top: 50%;
   line-height: 16px;
   margin-top: -8px;
}

Answer 4

到目前为止，所有提议的解决方案都不是“理想的” 首先，如果您的图像不属于内容本身，请不要使用图像元素。而是将其应用为背景图像。

使用新的CSS3背景选项，您可以另外设置，例如background-size，-clip，-origin等......！

要在文本元素中水平和垂直居中，只需将其显示值设置为“table-cell”和“text-align：center”和“vertical-align：middle”即可。

<div id="top-area">
  <p>Some text</p>
</div>


html, body {height: 100%;}

#top-area {
    display: table;
    width: 100%;
    height: 70%;
    border: 1px solid red;
    /*background-image: ... */
}

#top-area p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

请参阅jsFiddle

浏览器支持：IE 8+和所有“现代”浏览器

PS：“现代方式”将使用Flexbox

在文本上垂直和水平居中文本

4 个答案: