第一篇文章和一个菜鸟。
我正在学习html \ css，通常会在这里进行一些搜索来解决大多数问题。我似乎无法通过下面的页面解决问题。基本上我想要一个围绕div的圆圈中的几个图像，其中包含隐藏的文本。当我在图像上悬停（或者稍后点击）时，关联的文本应显示 - 然后隐藏\更改下一个图像悬停时（想想人物和个人资料）
到目前为止，该页面按照我的需要进行操作 - 全屏显示。当我使浏览器窗口变小时，文本保持不变并且所有其他元素都移动。我知道我有位置：固定在图像.hover，这就是问题所在。但是如果我改变它会破坏：固定到任何其他值？
我在这里已经阅读了很多答案，我已经花了好几个小时试图找出它但却失败了，现在因为我未能解决的问题而感到沮丧，我确信这是一个非常简单的问题。
我想要的只是在调整浏览器窗口大小时将文本保持为图像圆的中心的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>
答案 0 :(得分：1)
通常添加边距：对元素的自动可以起作用，但是有位置可能不会。
您最好的选择是使用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;}