我目前遇到的问题是，当我调整浏览器窗口大小时，尤其是变大时，我添加的图像从屏幕上消失，或者与上面的文本重叠。
我试过以不同的方式对齐它，但我还是发现它要么不起作用，要么会从页面上消失。可能是因为我的文字和图片没有相互交流，只是一起坐在页面上，但我不确定如何解决这个问题，因此我们将不胜感激任何建议和帮助。
在调整我的按钮的大小时也遇到了一些麻烦，我已经尝试在HTML和CSS中调整高度/宽度，但是它似乎没有什么不同。
当前问题:按钮完全从页面上消失，并且图像与文本重叠。
预期结果:理想情况下看起来像下面这样，但按钮会更小、更高等。理想情况下，段落中的文本会更庞大，所以它不仅仅是横跨整个页面的 1 行，可能有 3 或 4 行行居中。
谢谢!
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
@font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
@font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
position:relative;
left:50%;
transform: translate(-50%, 10%);
text-align: center;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
position:relative;
text-align: center;
left:50%;
transform: translate(-50%, 50%);
text-align: center;
margin: 0px 100px 0px 0px;
}
.image {
position: fixed;
align-content: space-between;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
padding-top:40px;
padding-left: 3000px;
float:left;
}
</style>
</head>
<body>
<a href="index.html"><div class="button">
<img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div>
</a>
<div class="div1"; style="color:black";style="align: middle">Chapter 1: <br>The Stranger</div>
<div class="div2"; style="color:black";style="align: middle">Text Text Text</div>
<div class = "image"; style="align: middle"><img src="assets/images/narrative/man_liferaft.png"></div>
</body>
</html>
最佳答案
你的代码有很多错误:
- 你把 ; 用来分隔 html 标签属性，你应该把它放在 style 属性中，以分隔样式
- 你不需要 position: relative 来居中文本，你可以使用 text-align
- 您也不需要 left: 50% 和 transform: translate() 来使文本居中，当某些内容难以居中时，这是一种 hack
- 当您使用 position 而不是相对(绝对和固定)时，您不需要 float: right
- 同样在使用 position 时，您可以使用 top、bottom、left 或 移动它对了，除非有必要，否则不要通过填充使元素变大
- 如果不使用 display: flex
justify-content 或 align-items
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>The Impossible Journey</title>
<link rel="icon" href="assets/images/buttons/website_browser_icon.png">
<style>
@font-face{
font-family:myFirstFont;
src: url('assets/fonts/makoa.ttf');
}
@font-face{
font-family:mySecondFont;
src: url('assets/fonts/simplicity.otf');
}
.div1 {
font-family: myFirstFont;
font-size: 10em;
text-align: center;
color: black;
}
.div2 {
font-family: mySecondFont;
font-size: 3.71em;
text-align: center;
color: black;
margin: 0px 100px 0px 0px;
}
.image {
text-align: center;
}
body {
background-image: url('assets/images//bg_rain.png');
margin:0;
padding:0;
background-size:cover;
}
.button {
position: fixed;
top: 40px;
right: 40px;
}
</style>
</head>
<body>
<a href="index.html"><div class="button"><img src="assets/images/buttons/home_rollover_over.gif" onmouseover="this.src='assets/images/buttons/home_rollover_under.gif'"onmouseout="this.src='assets/images/buttons/home_rollover_over.gif'" ></div></a>
<div class="div1">Chapter 1: <br> The Stranger</div>
<div class="image"><img src="assets/images/narrative/man_liferaft.png"></div>
<div class="div2">You decide to set a path toward the object. As you draw closer, you discover it's a man, passsed out on an inflatable life raft. You tie his life raft to the boat, haul him aboard and wait for him to wake up. <br> Your journey continues.
</div>
</body>
</html>关于html - 当浏览器大小发生变化时，图像无法与文本正确对齐 - 有时会从屏幕上消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57867364/