Question

我是html和css的新手，我已经开始创建一个网站，所以我开始正确放置徽标和背景，现在问题是我无法垂直居中我的徽标图像。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Insert title here</title>
</head>
<body>
    <div class="bg">
        <div class="menu">          
            <div class="logo"></div>
        </div>
    </div>
</body>
</html>

CSS：

body {
    background:url(../img/bg.png) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    z-index:1000;
}
body {
    margin:0 ;
    padding:0;
    height: 100%;
    width: 100%;
}

.menu { 
    background:url(../img/MenuBar.png) ;
    height:150px;
    width:1242px;
    position:relative;
}

.logo { 
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    margin:0 auto;  
}

Answer 1

这应该可以解决问题。

.menu { 
background:url(../img/MenuBar.png) ;
height:150px;
width:1242px;
position:relative;
display: table;

}

.logo{

     background:url(../img/Untitled-1.png) no-repeat center;
     width:262px;
     height:80px;
     margin:0 auto;
     display: table-cell;
     vertical-align: middle;

}

Answer 2

使用您使用的相同"margin-left: auto; margin-right: auto"或"margin: 0 auto"技巧创建包含div。像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
<style>
    body{
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    z-index:1000;
    }
    #container {
    }

    #bg {
        margin: 0 auto;
        width: 25%;
    }

    #menu{ 
    background-color: green;
    height:150px;
    width:600px;
    }

    #logo{
    background-color: blue;
    width:262px;
    height:80px;
    margin:0 auto;
    }
</style>
</head>
<body>
    <div id="container">
    <div id="bg">
        <div id="menu">          
            <div id="logo"></div>
        </div>
    </div>
</div>
</body>
</html>

Answer 3

正在进行什么

鉴于你希望它的工作是垂直居中的，到目前为止唯一的答案是给.menu造型vertical-align:middle。那不行。要垂直居中，您需要使用position技巧。您为该项目position:absolute，然后将其告知top:50%，这将使该项目的顶部降低50％。

我们希望项目的中心位于容器的中心，而不是顶部位于中心。所以我们最后添加一个负值的margin-top。该负值是对象高度的一半，在这种情况下，80px / 2 = 40px。要水平居中，我们需要做同样的事情。 margin:0 auto现在无法正常工作，因为它绝对定位。

代码

最后，你会改变这个：

.logo { 
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    margin:0 auto;  
}

对此：

.logo {
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    position:absolute;
    top:50%;
    margin-top:-40px;
    left:50%;
    margin-left:-131px;
}

Working Fiddle

图像不以css为中心

3 个答案:

正在进行什么

代码