将响应文本置于标题图像顶部

我的代码很混乱。我刚刚创建了一个网站，我试图在标题图片的顶部垂直和水平居中放置一段文字，同时使其具有移动响应能力。将响应文本置于标题图像顶部

#index_header { 
 
    position: absolute; 
 
    z-index: 0; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
#index_header img { 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.background_title { 
 
    position: absolute; 
 
    font-family: 'Montserrat', sans-serif; 
 
    color: #FFF; 
 
    font-size: 64px; 
 
    left: 50% top: 50%; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>HOME</title> 
 

 
    <link rel="stylesheet" type="text/css" href="css/fluid_index.css" /> 
 

 
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
 

 
    <body> 
 

 
    <div class="page_container"> 
 
     <div id="index_header"> 
 
     <a href="#"> 
 
      <img alt="slider" id="index_headerimg" src="http://www.bakeryandsnacks.com/var/plain_site/storage/images/publications/food-beverage-nutrition/bakeryandsnacks.com/regulation-safety/coles-freshly-baked-claims-false-rules-federal-court-australia/9101085-1-eng-GB/Coles-freshly-baked-claims-false-rules-Federal-Court-Australia.jpg" 
 
      /> 
 
      <p class="background_title">G.F. Bakery</p> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 

 
</html>

如果有人可以帮助我，将是惊人的。

来源

2015-12-08 Gabe A. Petersen

对于初学者来说，你永远闭上你的'' ...标签对不起 – ElGavilan

这是一个复制和粘贴错误 –

当我尝试它时，它确实有效，但你错过了一个;在你的CSS。试试这个：

.background_title { 
    position: absolute; 
    font-family: 'Montserrat', sans-serif; 
    color: #FFF; 
    font-size: 64px; 
    left: 50%; 
    top: 50%; 
}

你没有关闭 '左'。

来源

2015-12-08 18:49:26

是的，你说得对，我觉得是很愚蠢的，但如果你发现还是当我修复，CSS只集中第一个字母，使其略微不符合 –

您是如何仅指第一个字母？小提琴，这是你想要的吗？ https://jsfiddle.net/c2bom0cc/1/如果没有请让我知道。 –

文字不居中，因为您可以看到它比图像的实际中心向右倾斜 –

将响应文本置于标题图像顶部

回答

相关问题