gpt4 book ai didi

html - 水平和垂直居中对齐 div 内的图像

转载 作者:太空宇宙 更新时间:2023-11-04 09:54:22 25 4
gpt4 key购买 nike

我目前有一个 header div,在它里面,我有 header-topheader-bottom。我试图将我的 Logo 放在 top-header 上并垂直和水平对齐。 Logo 水平但垂直对齐,它根据看起来的 body 插入对齐,并将标题向下 20px。这是我的代码。

HTML:

<body>
<div id="big-wrapper">
<div id="header">
<div id="header-top">
<img src="img/main-logo.png" />
</div>
<div id="header-bottom">
</div>
</div>
</div>
</body>

CSS:

#header {
width: 100%;
height: 160px;
box-shadow: 0 1px 4px 1px rgba(237, 237, 237, 1);
}

#header-top {
height: 130px;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
background-color: rgba(255, 255, 255, 1);
}

#header-top img {
height: 90px;
width: 255px;
display: block;
margin: 20px auto;
}

#header-bottom {
height: 30px;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
background-color: rgba(255, 255, 255, 1);
}

这是我得到的

enter image description here

最佳答案

建议。可能是错误的。

    <div id="header-top">
<center>
<img src="img/main-logo.png" />
</center>
</div>

如果错误,尝试对齐 div。

编辑:如果一切都失败了,编辑图像,并将其偏移到所需的对齐方式

关于html - 水平和垂直居中对齐 div 内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38840781/

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