英文:
How do I vertically align this image inside the header?
问题
如您在图像中所见，我在页眉内（蓝色部分是页眉）放置了一个徽标，但无法将其垂直居中对齐。我添加了边框到图像只是为了看到它的大小。
基本上徽标和页眉背后的所有CSS代码如下：
header{
margin-bottom: 10px;
background: blue;
}
#logo{
margin-left: 10px;
border: 3px solid black;
}
我可以做什么？谢谢。
英文:
As you can see in the image, i have a logo inside the header (the blue part is the header), and i can't align it to be vertically at the center. I've put a border to the image just to see its size.
Basically all the CSS code behind the logo and header is this:
header{
margin-bottom: 10px;
background: blue;
}
#logo{
margin-left: 10px;
border: 3px solid black;
}
What can I do? Thanks.
答案1
得分: 1
以下是翻译好的部分：
最简单的方法是使用 display flex：
header{
margin-bottom: 10px;
background: blue;
display: flex;
align-items: center;
}
如果你需要帮助，你可以在评论中给我打电话。
英文:
The easiest way to do this is using display flex:
header{
margin-bottom: 10px;
background: blue;
display: flex;
align-items: center;
}
if you need help you can call me in the comments
答案2
得分: 0
这可能适用于您的情况：
#logo {
margin-top: auto !important;
margin-bottom: auto !important;
}
正如其他人所说，另一种方法是使用flexbox并将center值设置为align-items属性的值（将其添加到您的头部）。
或者在您的logo中使用align-self属性。
英文:
It may work in your case :
#logo {
margin-top: auto !important;
margin-bottom: auto !important;
}
as guys guys said , another way is using flexbox and and setting center value to align-items property. (add it in your header)
Or use align-self propery in your logo.
答案3
得分: 0
英文:
<header>
<div class="logo-container">
<img src="logo.png" alt="Logo">
</div>
</header>
<style>
header {
display: flex;
justify-content: center;
align-items: center;
height: 80px; /* set the height of the header */
}
.logo-container {
display: flex;
align-items: center;
}
</style>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论