第一个帖子和一个菜鸟。
我正在学习 html\css，通常只需在此处搜索一下即可解决大多数问题。我似乎无法理解下面页面的问题。基本上我想要围绕一个包含隐藏文本的 div 的圆圈中的几个图像。当我将鼠标悬停(或稍后单击)在图像上时，相关文本应该显示 - 然后在下一张图像悬停时隐藏\更改(想想人物和个人资料)
到目前为止，该页面已按我的要求运行 - 全屏显示。当我缩小浏览器窗口时，文本保持原样，所有其他元素移动。我知道我有 position:fixed on image .hover 这就是问题所在。但是如果我改变 :fixed 到任何其他值，它就会中断？
我在这里阅读了很多答案，我花了几个小时试图弄清楚但失败了，现在我因未能解决我确信是一个非常简单的问题而感到沮丧。
我想要的只是每当调整浏览器窗口大小时，将文本保持在图像圈中央的 div。我需要在此代码中更改什么才能实现此目的？有没有更好的方法来做我想做的事？
我希望你理解我的挫败感，不要让我太难过 :-) 我以前从未遇到过定位问题 - 直到尝试显示\隐藏一个 div。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled</title>
<style>
#image {
position:relative;
width:180px;
height:140px;
}
#image .hover {
display:none ;
position:fixed;
}
#image:hover .hover {
display:block;
}
#wrapper{
width:960px;
margin :0px auto ;
text-align: center ;
}
#banner{
height:250px;
}
#content{
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="content">
<div id="image" style="left: 383px; top: 31px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 97px; top: -83px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 652px; top: -272px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 91px; top: 50px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 370px; top: -80px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top:480px; width: 388px; height: 440px">
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
<div id="image" style="left: 650px; top: -318px; width: 135px; height: 192px;">
<img src="images/img-placeholder.jpg" alt="" height="176" width="127"/>
<div class="hover" style="left: 440px; top: 480px;width: 388px; height: 440px">
<p>Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
<p>Eight Lines of text here Eight Lines of text here</p>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
通常向元素添加 margin:auto 是可行的，但对于 position 它可能行不通。
最好的办法是使用 JavaScript(甚至是 jQuery)来获取屏幕高度和宽度。您可能还需要在调整大小时再次检查并获取屏幕尺寸。
这里有一篇很好的文章可以帮助您入门: Using jQuery to center a DIV on the screen
如果你不想使用 JS...
尝试这样的事情:http://jsfiddle.net/RbFnm/10/
#box{margin: auto; background: #000; position: relative; z-index: 1; width: 300px; height: 300px;}
#subbox{background: #ccc; position: absolute; width: 50px; height: 50px; z-index: 3; top: 10px; left: 10px;}
#special{background: #ccc; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; margin: -45px 0 0 -45px; z-index: 5;}
以及垂直对齐的提示，来自:http://phrogz.net/css/vertical-align/
关于css - 调整页面大小时显示\隐藏 Div 定位中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15646290/