Question

当我根据需要调整“徽标”的大小时，它不再在页面中心对齐，现在当我最后添加{2} .logga时，它就在左侧。

所以这是我的代码：

body {
    background-image: url(http://i.stack.imgur.com/iOkRy.png);
    background-color: #cccccc;
	background-repeat: no-repeat;
	background-size:   cover;
}
.logga {
    width: 200px;
    height: 120px;
}

.logga img {
    width: 100%;
    height: auto;
}

<!DOCTYPE HTML>
<html>
	<head>
		<title>Hello</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>

	<body>
		<div class="logga" align="center">
			<a href="/start"><img src="http://i.stack.imgur.com/iOkRy.png" alt="Hello"></a>
		</div>
	</body>

</html>

Answer 1

它与包含div的中心对齐。如果你需要div来居中。父元素需要具有width属性，然后子元素需要margin-left: auto和margin-right: auto;。

示例小提琴：

https://jsfiddle.net/8yhsr5ba/

Answer 2

您可以通过为margin:0 auto;类指定.logga来解决此问题。

.logga{
    width: 200px;
    height: 120px;
    margin:0 auto;
}

这使浏览器可以自动计算元素每一侧的均匀间距。注意：虽然已弃用，但也可以使用<center></center>

将其置于HTML中心

<!DOCTYPE HTML>
<html>
    <head>
        <title>Hello</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <center>
            <div class="logga" align="center">
                <a href="/start"><img src="logga.png" alt="Hello"></a>
            </div>
        </center>
    </body>
</html>

Answer 3

试试这个。您将图像置于中心位置。

＆＃13;

body {
    background-image: url("bg2.jpg");
    background-color: #cccccc;
    background-repeat: no-repeat;
    background-size:   cover;
}
.logga {
    width: 200px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
  background-color:white;
}

.logga a{
  display:block;
}
.logga img {
    display:block;
    width: 100%;
    height: auto;
}

＆＃13;

<div class="logga">
            <a href="/start"><img src="http://7-themes.com/data_images/out/62/6983929-fall-nature-photography.jpg" alt="Hello"></a>
        </div>

＆＃13;

Answer 4

HTML5中不支持align属性。请改用CSS，如下所示：

.logga {
    width: 200px;
    height: 120px;
    margin: 0 auto; /* this places .logga in the center of the body */
    text-align: center; /* this centers inline elements inside .logga, you don't necessarily need it */
}

Answer 5

只需使用保证金：auto;风格。

调整大小时居中对齐图像？

5 个答案: