gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:43:35 25 4
gpt4 key购买 nike

我的代码一团糟。我刚刚创建了一个网站,我正在尝试将一段文本垂直和水平居中放置在标题图片的顶部,同时使其具有移动响应能力。

#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>

如果有人能帮助我,那就太好了。

最佳答案

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

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

你没有关闭'left'。

关于html - 将响应文本置于标题图像的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34163247/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com