个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
此页面中的 Logo 元素未在 <header> 中垂直居中容器。该问题在移动设备上比在桌面设备上更为明显。第二个元素 ( #forum-link ) 正确对齐。
flex 盒 align-items:center规则似乎适用于一个子 div 但不适用于另一个。为什么会这样？如何解决？
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height:116px;
}
#logo {
margin-left: 15px;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
@media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>编辑:澄清了问题
最佳答案
嗯，我想这就是您想要的: Logo 和链接在背景上垂直居中？仅针对非移动解决方案更新。
此外，正如我在评论中所说，为全面起见，在此重复:您的图像不是垂直居中的，因为它是其父级的高度:#logo 和 header.
链接的高度小于 header，因此它是垂直居中的。
如果您指的是 5px 左右的空间，只需在 #logo 的图像上添加一个 display: block 即可删除该间距。不过，它仍将是其 parent 的高度。
我的解决方案基本上是给你的 body 一个高度， flex 它，然后你的 header 垂直居中对齐。
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
height: 116px;
margin: 0;
display: flex;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
width: 100%;
}
#logo {
margin-left: 15px;
}
#logo img {
display: block;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
@media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link"><a href="/forum">Join our Forums!</a></div>
</header>
</body>关于html - 为什么此 Logo 未在其父容器内垂直居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57763749/
24
4
0
谁能看看这个 fiddle http://jsfiddle.net/pkcwtone/1/并告诉我为什么我无法将图像完全放入导航中？ 这是 html:
到目前为止，我有 9 个 Logo ，并且我按列表顺序显示该 Logo 。现在我要做的是，我必须显示前 3 个 Logo 并等待几秒钟，然后隐藏该 3 个 Logo 并再次显示接下来的 3 个 Log
我正在尝试 ACSLogo(Mac 版本的 Logo)中的递归程序，并希望返回 2 个整数的列表(基本上是 X 坐标和 Y 坐标)。我不知道如何让它返回 2 个值。它没有问题。 此外，当您创建一个列表
我有一个用户以 PNG 格式上传的 Logo 。 我的目标是将用户上传的 Logo 转换为白色。 像这样 - 这样它在较暗的背景下看起来不错。 我可以导出它并使用 Photoshop 获得我想要的东西
经过多次研究后，我没有弄清楚如何将我的 Web 应用程序的 Logo 与导航项对齐。我创建了 Logo 图像，但无法以正确的方式对齐它!希望你们中的一些人能帮助我。 这是Haml代码 %heade
我在 Joomla 2.5 的模板上使用 Gantry 该模板在第一点设置为托管一个小图像作为 Logo ，但我希望它在宽度方面更改为更大的图像。 因此，现在它在 ipad 上不起作用，因为它开箱即用
我正在工作的站点的 Logo 出现在左侧，但我希望它居中。我该怎么办？在下方找到 CSS 代码。 header .logo{ display: inline-block; padding: 0; ve
我确信这使用 jquery 相当简单，但我无法弄明白。我有一个带有 Logo 的网站，该网站加载时会出现。当用户将鼠标悬停在某个导航链接上时，我想将该 Logo 与不同的 Logo 交换。 当鼠标悬停
我想知道使用 LOGO 是否有任何真正的缺点？我知道它是用来教 child 的，但理论上它可以用于更高级别的项目。除了它的许多不同版本之外，还有什么真正的缺点吗？ 最佳答案 除了实际问题(跨平台支持、
我一直在尝试使用公司文档中发布的两种简单方法替换 JASPERSOFT CE 中的 Logo 和背景图像。我面临的问题是它从 MYSQL 数据库加载 _THEMES\5A5D753\IMAGES\LO
当用户将鼠标悬停在导航栏上时，我试图让我的 Logo 从透明背景变为填充背景。 目前，我的 JQuery 在悬停时工作，但当用户离开导航时， Logo 不会变回透明 Logo 。
我知道之前已经回答过类似的问题。但我无法弄清楚哪种方法是最好的。我发现有两种方法: 使用img 标签获取两张图片，一张是小尺寸的，一张是大尺寸的。在大屏幕上隐藏小尺寸 Logo ，在小尺寸屏幕上则相反
我在页眉中使用的 Logo 没有背景，但我在 Logo 悬停时添加了背景。我希望 Logo 背景放大，但我使用的代码使 Logo 放大而不是背景......如何更改代码以在不影响 Logo 的情况下放
我试图将 Logo 与其下方的相应文本水平对齐，以便它们看起来美观且有序。目前，它们只是垂直的。我搜索了这个网站和许多其他网站，并尝试了不同的解决方案，但似乎没有任何效果。这是我的代码。 .intro
我正在尝试调整 Logo 的大小，并在不调整导航栏大小的情况下将标题添加到 Logo 的一侧。 What the current navbar looks like HTML:
Toggle navigation
在我的网站上，我有一个 Logo 图像，然后是公司名称。目前它是堆叠的，所以它是 Logo 图像，下面是公司名称。 我想要的是他们肩并肩。因此，左侧是 Logo 图像，右侧是公司名称。 我做错了什么？
我读过 标签 is inappropriate for a logo .但是，如果您的 Logo 是纯文本，您应该使用什么？我觉得 和 也不合适。这是一个示例: Comp
Berkeley Logo User Manual 告诉我们，所有在连字符后的命令行参数都将收集在变量中: If a command line argument is just a hyphen, t
我试图将 Logo 与几个导航链接对齐，其中大多数网站的 Logo 在左侧，几个链接在右侧(这是我正在努力实现的目标)。 我有一个媒体查询，使标题 Logo 显示在导航链接上方。 但是好像不行。 我确
我是一名优秀的程序员,十分优秀！