Html css中的图像不居中_Html_Css_Image_Centering

Html css中的图像不居中

html css image

Html css中的图像不居中,html,css,image,centering,Html,Css,Image,Centering,我不熟悉html和css，我已经开始制作一个网站，所以我开始正确放置徽标和背景，现在的问题是我无法垂直居中我的徽标图像 HTML: 这个学校会成功的 .menu { background:url(../img/MenuBar.png) ; height:150px; width:1242px; position:relative; display: table; } }使用相同的左边距创建一个包含div的div:auto；右边距：自动或边距：0您正在使用的自动技巧。像这样： <!DOC

我不熟悉html和css，我已经开始制作一个网站，所以我开始正确放置徽标和背景，现在的问题是我无法垂直居中我的徽标图像

HTML:

这个学校会成功的

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

}

使用相同的左边距创建一个包含div的div:auto；右边距：自动或边距：0您正在使用的自动技巧。像这样：

<!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>

发生什么事考虑到您希望它垂直居中，到目前为止，这里唯一的答案是给出垂直对齐的菜单样式：中间。那不行。要垂直居中，需要使用位置技巧。你给物品一个位置：绝对，然后你告诉它是顶部：50%，这将使该物品的顶部向下50%

我们希望物品的中心在容器的中心，而不是顶部在中心。所以我们最后加上一个负值。该负值是对象高度的一半，在本例中为80px/2=40px。要水平居中，我们也需要这样做。保证金：0自动将无法工作，因为它的位置绝对

密码最后，您将更改以下内容：

.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;
}

两件事，你有一个，但你的造型是直接应用于身体，所以你不需要它。其次，您不需要将应用于body的样式分开，它们可以一起使用。第三，身体有一个z-指数，它不会做任何事情，除非它有位置：相对或位置：绝对。好的，我会纠正这一点，但之后它会工作吗？没有理由它不工作。检查css表中可能影响这些div的内容。看看这个：它来自dwreck，但没有他的变化。您的代码正在那里工作。此处显示的CSS可能被某些内容覆盖。一些事情也可能会产生影响。你有强制div显示的声明吗：可能是内联的吗？不，我不这么认为，我也不知道为什么它没有垂直居中和ym。他已经有了边距：0 auto；，所以左边空白和右边空白都是无意义的重复。默认情况下，display:block应该已经用div设置好了，但是可能会有一个奇怪的CSS规则影响，所以这可能会起作用。我尝试过这个方法，它水平居中，而不是垂直居中。编辑了我的答案，你需要使用垂直对齐标签。仍然有三条多余的线不需要。额外的线和YM是什么？太好了！但是，在所有浏览器中显示的内容是否相同，屏幕分辨率是否不同？这取决于相同的含义。container.menu是一个固定宽度的对象。这意味着它没有响应能力，也不会改变。在较小的屏幕上，您将看到水平滚动条。但是，无论屏幕大小如何，徽标始终居中于。菜单内。如果您愿意，您甚至可以将.menu更改为灵活的，并且上面的代码仍然有效。是否有您选择然后取消选择此作为答案的原因？没有原因！它也很好用！！如果我能选择2个答案，我也会选择你的！很公平。一般的政策是，你投票选出所有正确和有用的答案，包括勾选答案，然后选择你实际使用的答案，或者你认为最好的答案，以给出勾选。这为那些试图提供帮助的人提供了激励，并使未来的读者更容易看到哪些答案是有用的。

<!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>

.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;
}