gpt4 book ai didi

html - 图像不会以边距 : auto; 居中

转载 作者:太空宇宙 更新时间:2023-11-04 02:58:43 27 4
gpt4 key购买 nike

我正在尝试为 TheOdinProject 上的作业重新创建 google 主页。如何让 Logo 贴在屏幕中央,两边的像素数量相等?

这是我的代码:

#logo {
margin: auto;
position: relative;
display: block;
width: 200px;
}
#searchbar {
margin-left: 650px;
position: relative;
width: 1000px;
line-height: 2;
}
<!DOCTYPE html>
<html>

<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>

<body>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</form>
</div>
</body>

</html>

最佳答案

#logo {
margin: auto;
position: relative;
display: block;
width: 200px;
}
#searchbar {
margin-left: 650px;
position: relative;
width: 1000px;
line-height: 2;
}

#logo img {
max-width: 100%;
}
  <div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</form>
</div>

因此,您有一个容器 div#logo,您为其分配了 200 像素的宽度。然后你把一张图片放在里面,物理宽度为 570px。你在期待什么?

要解决它,要么调整图像大小,要么将此 css 分配给它:

#logo img { max-width: 100% }

关于html - 图像不会以边距 : auto; 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31691579/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com