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

【问题标题】：Center aligning image when resized?调整大小时居中对齐图像？
【发布时间】：2016-01-03 13:54:54
【问题描述】：

当我根据需要调整“徽标”的大小时，它不再与页面中心对齐，现在当我添加最后两个 .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>

【问题讨论】：

标签： html css image resize center

【解决方案1】：

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

这里的小提琴示例：

https://jsfiddle.net/8yhsr5ba/

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个。你会让你的图像居中。

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

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

【讨论】：

非常感谢！我也删除了背景颜色，所以它是完全透明的，但是谢谢！现在可以了

【解决方案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 */
}

【讨论】：

【解决方案5】：

只需使用边距：自动；风格。

【讨论】：