Question

我需要使用css集中我的图像。我遇到了麻烦，无法知道该怎么做。

HTML

<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<title>
AG.
</title>

<body>

<img src="images/logo.png" alt="AG" class="logo">


</body>

</html>

CSS

.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
}

Answer 1

您无法将内联元素置于中心位置 - 您需要为其设置display: block样式：

.logo {
  width: 500px;
  height: 467px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<img src="http://placehold.it/500/467" alt="AG" class="logo">

Answer 2

首先将图像放在容器中，否则高度和宽度只是编辑图片的大小。

我将它添加到div中，然后将属性添加到自己的容器中。

http://codepen.io/anon/pen/uHaGC

这是一支代码笔。

<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<title>
AG.
</title>

<body>
<div id="logo">
<img src="images/logo.png" alt="AG">
  </div>

</body>

</html>


#logo {
  position: relative;
width: 50%;

margin-left: auto;
margin-right: auto;
}

#logo标记使其居中（可能不依赖于您的分辨率）。只需为您的图片设置一个新标签并更改尺寸！

我更喜欢使用百分比而不是像素数量，因为它在更大或更小的分辨率下看起来更好。

Answer 3

将图像包装成div，

更改html并添加ID如下:(顺便说一句，我使用谷歌图片作为占位符，但你明白了）

<div id="pic">
     <img src="https://www.google.com/logos/doodles/2014/jonas-salks-100th-birthday-5130655667060736-hp.jpg" alt="AG" class="logo">
</div>

然后是CSS

#pic {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;

在http://jsfiddle.net/e5pdof91/

查看工作情况

}

通过div居中图像

3 个答案: