0

我想要一个宽度为 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 来获取文本的水平位置，但这感觉像是错误的方式。有人有更好的建议吗？

4

4 回答 4

0

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

演示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;
}
于 2013-09-11T19:25:59.923 回答
0

这是您的代码重构工作。它使顶部区域成为确定图像大小的区域，因为图像恰好填充了空间。然后通过将文本向左移动和顶部区域大小的 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

于 2013-09-11T19:28:37.350 回答
0

我相信 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;
}
于 2013-09-11T19:47:18.993 回答
0

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

使用新的 CSS3 背景选项，您可以额外设置背景大小、-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

于 2013-09-11T20:32:39.223 回答