gpt4 book ai didi

html - 在保持列对齐的同时将文本居中放置在图像上

转载 作者:行者123 更新时间:2023-11-28 05:26:18 24 4
gpt4 key购买 nike

我正在使用此语法创建两列,左列左对齐,右列右对齐。语法完美无缺!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
#content {position:relative; z-index:1;}
</style>
<style type="text/css">
.wrap {
width: 1060px;
height:auto;
margin: auto;
text-align:center;
position:relative;
}
.text_over_image {
position: absolute;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:100px;
}
</style>

</head>

<body>
<div id="bg">
<img src="C:Image1.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<div>
<span style="float: left;">
<font size="30" color="red">Text1</font><br>
<img src="C:\1.jpg" alt="" style="width:425px;height:500px;">
</span>
<span style="float: right;">
<font size="30" color="red">Text2</font><br>
<img src="C:\2.jpg" alt="" style="width:425px;height:500px;">
</span>
</div>
<div style="height: 650px;"></div>
<div>
<span style="float: left; clear:both">
<font size="30" color="red">Text3</font><br>
<img src="C:\3.jpg" alt="" style="width:425px;height:500px;">
</span>
<span style="float: right;">
<font size="30" color="red">Text4</font><br>
<img src="C:\t.jpg" alt="" style="width:425px;height:500px;">
</span>
</div>
<div style="height: 650px;"></div>
</body>
</html>

如您所见,省略了对 .wrap 的调用在下面的语法中。如果我将调用添加到 .wrap在我的 <div>标签列结构被破坏。

我如何将文本置于图像的中心并维护通过调用 #bg? 创建的列结构

最佳答案

不要添加带有 <img> 的图像标签。通过 CSS 添加 background带有关键字的属性 no-repeat center center fixed如下所示。

background: url(../media/pic.png) no-repeat center center fixed;

关于html - 在保持列对齐的同时将文本居中放置在图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38757277/

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