不同分辨率屏幕中间的中心菜单 (CSS/HTML)

Question

我是初学者，我想创建一个菜单，它是屏幕中间的一个十字。十字架应该在每个部分都有一个与悬停一起使用的按钮。我已经可以解决问题了，但是它并没有真正起作用，因为它会根据浏览器的大小而变化。我希望它始终停留在中间并且根本不动。附上你可以找到我想出的代码。此外，我创建了一个 jsfiddle 文档：https://jsfiddle.net/50xxq5vc/

感谢您的帮助！

<!DOCTYPE HTML>

<HTML>
<Head>
<Title>This is a Test</Title>
<style>
@import url('http://fonts.googleapis.com/css?family=Lobster');
body
{
    background-color:#ffffff;
}
p{
    color:#000000;
}
img.party{

    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;  
}


.birne
{

position:absolute;
margin-top:15%;
margin-left:48%;
opacity: 1; filter: alpha(opacity=100);

}

.birne:hover
{

opacity: 0.3; filter: alpha(opacity=30);
}

.love
{

opacity: 1; filter: alpha(opacity=100);
}
.love:hover
{

opacity: 0.3; filter: alpha(opacity=30);
}

.hellotext
{
font-size: 18px;
font-family: 'Lobster', cursive;
position:absolute;
margin-top:12%;
margin-left:45%;
}
</style>
</head>
<Body>

<div><img class="party" src="http://s15.postimg.org/ms7vel74b/cross.png"/></div>
<div class="love">
<span class="hellotext">This is a test</span>
<div> <img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png"/></div>
</div>
</Body>
</html>

Answer 1

也许你可以尝试这样的事情：https://jsfiddle.net/8xc2415y/3/

<div id="container">
    <div id="wrapper">
        <div id="topsection">
            <div class="love">
                <span class="hellotext">This is a test - TOP</span>
                <div> <img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png"/></div>
             </div>
        </div>
        <!-- other sections -->
    </div>
</div>

和css喜欢：

#container{
    width:272px;
    height:272px;
    background-image:url(http://s15.postimg.org/ms7vel74b/cross.png);
    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
}
#container #wrapper{
    position: relative;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
}
#topsection {
    position:absolute;
    height: 130px;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
}

Answer 2

要使元素居中，最简单的方法是为其指定固定的宽度和高度。然后，通过将其置于绝对位置，您可以将其居中。我重做了你的 HTML:

<img class="party" src="http://s15.postimg.org/ms7vel74b/cross.png" />
<p>
    <img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png" /><br />
    This is a test
</p>

和CSS：

@import url('http://fonts.googleapis.com/css?family=Lobster');

img.party {
    position: absolute;
    z-index: 5;
    width: 272px;
    height: 272px;
    left: 50%;
    top: 50%;
    margin-left: -136px; /* half of the width */
    margin-top: -136px; /* half of the height */
}
p {
    opacity: 0.3;
    font-size: 18px;
    font-family:'Lobster', cursive;
    text-align: center;
    position: absolute;
    z-index: 10;
    width: 272px;
    height: 136px;
    left: 50%;
    top: 50%;
    margin-left: -136px;
    margin-top: -136px;
}
p:hover {
    opacity: 1;
}

另见JSFiddle

请注意，它可能需要在 p 的高度设置中进行一些调整，您可以通过更改 margin-top 来改变它。

不同分辨率屏幕中间的中心菜单 (CSS/HTML)

Center Menu in the middle of the screen with different resolutions (CSS/HTML)

html

css

position

center