Html 通过div使图像居中_Html_Css

Html 通过div使图像居中

html css

Html 通过div使图像居中,html,css,Html,Css,我需要使用css将图像居中。我遇到了麻烦，不知道怎么做 HTML 不能以这种方式将内联元素居中-需要为其提供display:block样式： .logo{ 宽度：500px；高度：467px；左边距：自动；右边距：自动；显示：块； } 首先将图像放入容器中，否则高度和宽度只是编辑图片的大小我将它添加到一个div中，然后将属性添加到它自己的容器中这是一支密码笔 <html> <head> <link rel="stylesheet" type="te

我需要使用css将图像居中。我遇到了麻烦，不知道怎么做

HTML

不能以这种方式将内联元素居中-需要为其提供

display:block

样式：

.logo{
宽度：500px；
高度：467px；
左边距：自动；
右边距：自动；
显示：块；
}

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

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

这是一支密码笔

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


AG。
#标志{
位置：相对位置；
宽度：50%；
左边距：自动；
右边距：自动；
}

#logo标签将其居中放置（可能不取决于您的分辨率）。只需为您的图像设置一个新标记并更改大小

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

要将图像包装到div中

更改html并添加一个ID，如下所示：（顺便说一下，我使用了一个google图像作为占位符，但你明白了）

看看它在哪里工作

}

添加显示：块到.logo类-如果您只需要水平居中。。。。

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

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

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

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