个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我一直在尝试学习 CSS 和 HTML，但在一些事情上遇到了困难。我似乎可以理解如何使用 CSS 在页面上定位元素？我需要垂直对齐顶部导航栏内的元素，但似乎终究无法弄清楚。我不只是在寻找一个简单的答案，我还想解释一下我做错了什么，这使我无法将元素移动到我需要的地方:)任何帮助将不胜感激。这是代码和 js fiddle 链接 https://jsfiddle.net/9trux138/2/
body {
margin: 0;
}
.topbar {
background-color: #17D8C7;
height: 35px;
overflow: hidden;
align-items: center;
padding: 0 2% 0 2%;
}
.topbar {
display: flex;
justify-content: space-between;
}
.topbar ul {
margin: 0;
padding-left: 0;
list-style: none;
position: relative;
display: inline-block;
}
.topbar ul li {
display: inline-block;
vertical-align: middle;
}
.topbar ul li a {
display: inline-block;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
.topbar ul li img {
height: 24px;
padding: 5px 5px 0px 0px;
}
.topright li {
vertical-align: middle;
}<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="topbar">
<ul class="topleft">
<li>
<a href="#"><img src="https://s8.postimg.cc/6t7njymhx/location-pin.png
" alt="Location Pin"></a>
</li>
<li>
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Contact Email"></a>
</li>
<li>
<a href="#"><img src="https://s8.postimg.cc/fbh3oalat/open-time.png
" alt="Opening Times"></a>
</li>
</ul>
<ul class="topmiddle">
<li>
<a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"><span>Email Promotions</span></a>
</li>
</ul>
<ul class="topright">
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>詹姆斯
最佳答案
从 img 标签中移除 padding-top 它会在我们使用 vertical-align: middle; 时阻止默认居中。
您还需要在 anchor 内的 span 和 img 标签上添加 vertical-align: middle，而不是 anchor 。
.topbar ul li a span {
vertical-align: middle;
}
.topbar ul li img {
height: 24px;
padding: 0 5px 0px 0px;
vertical-align: middle;
}
body {
margin: 0;
}
.topbar {
background-color: #17D8C7;
height: 35px;
overflow: hidden;
align-items: center;
padding: 0 2% 0 2%;
}
.topbar {
display: flex;
justify-content: space-between;
}
.topbar ul {
margin: 0;
padding-left: 0;
list-style: none;
position: relative;
display: inline-block;
}
.topbar ul li {
display: inline-block;
vertical-align: middle;
}
.topbar ul li a {
display: inline-block;
text-align: center;
text-decoration: none;
}
.topbar ul li a span {
vertical-align: middle;
}
.topbar ul li img {
height: 24px;
padding: 0 5px 0px 0px;
vertical-align: middle;
}<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="topbar">
<ul class="topleft">
<li><a href="#"><img src="https://s8.postimg.cc/6t7njymhx/location-pin.png
" alt="Location Pin"></a></li>
<li><a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Contact Email"></a></li>
<li><a href="#"><img src="https://s8.postimg.cc/fbh3oalat/open-time.png
" alt="Opening Times"></a></li>
</ul>
<ul class="topmiddle">
<li><a href="#"><img src="https://s8.postimg.cc/ytbr47v39/contact-email.png" alt="Email Promotions Sign Up"><span>Email Promotions</span></a></li>
</ul>
<ul class="topright">
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>关于html - 如何垂直对齐 img 旁边顶部导航栏中的 'email promo' 文本以及其他文本链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51225607/
25
4
0
我想在 下面添加按钮标签，但不知道使用什么 CSS 来实现。下图显示了一个可能的场景，“Main_Page”标题和按钮构成了一个单独的 div 的每个部分。我尝试使用 margin-top属性，但想
我的图像不会位于 slider 旁边.. 而只是堆叠在 slider 下方。好像没有空间放置图像，因为 slider 占用了太多空间，但是当我查看代码时，情况似乎并非如此，除非我错过了什么:) Thi
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
我想在文本的左侧放置一个图像，并根据窗口的分辨率保持原样。 这是没有图像的样子:http://prntscr.com/fmky4f 这是我希望它放置后的样子。 https://prnt.sc/fmkk
我创建了一个button，当我点击button然后popup模型显示时，它会隐藏在页面主体旁边，按钮也会隐藏我滚动。我希望当弹出窗口出现时我无法滚动我的页面主体。我使用 Bootstrap 创建了模型
我是一名学生网络开发人员，需要一些帮助。我需要复制这个 wikipedia page尽我所能 我想把 Story 和下面的 div 放在官方 wiki 页面上的位置。 另一个问题是游戏玩法“div”，
需要这项工作的 header 的屏幕截图: 如您所见，菜单位于 Logo 下方。我想要它旁边的菜单，在 Logo 的右侧。我不知道这是否可行，但如果可行，我需要一些帮助，谢谢。 这是所有内容的代码，为
基本上，我们必须有这样的布局，其中图像必须溢出容器，文本填充图像创建的空间(向左偏移)。 我们目前有这样的结构: Some paragraph
我有一个“弹出式”表格，它是一个固定元素。该表有时太高以适应某些屏幕，因此我将 overflow 设置为 auto。然而，滚动条似乎与弹出表格分离，因为父 div 是屏幕的宽度而表格较小。有没有办法让
我有一个带有边框的 div: 表示上面内容的div使用的样式是这样的: const style = { textAlign: "center", mar
如何在各种屏幕尺寸下完美地放置图像？ .background-login { background: url(../img/login.png) no-repeat; background-s
我正在尝试在居中的圆形头像旁边的右上角放置一个编辑图标。但是，如果我在行小部件中使用中心小部件，它就不起作用: Row( children: [
首先，感谢您阅读我的问题! 因此，我遇到了一些有关将单元格名称传递到下一个 View 的问题。现在它会传递它，但只会显示最近加载的单元格。 现在的编程方式如下: var passName = "" v
这是网站:www.red-tuxedo.com 我希望“红色燕尾服”文本位于 Logo 旁边，而不是下方，并且我想摆脱贯穿 Logo 的硬性规定。我的 CSS/HTML 技能达不到要求。当我更改文本时
我有一个顶部水平菜单栏，宽度为 100%，居中对齐，位置固定，因此它不会随页面滚动。 但我还想在菜单左侧的菜单内联一个名称(例如名为 test)。 但即使我使用内联 block ，它也会根据左侧的 d
我有一个 4 个链接。我希望他们都在同一行。其中两个在中间，另外两个在右边。我把它们包了两个又两个，但我无法让它工作。 我的 CSS 是这样的: #links_center { } #links_ri
我在 material-ui 中使用 Grid 组件。我无法让网格元素相互堆叠。现在他们正在彼此堆叠。我不确定是什么让它们堆叠在一起。我已经这样做了，所以只有在小屏幕上网格元素才会堆叠在一起，否则每个
我试图在固定宽度的内联 block div 旁边放置一个按钮。但它就在 div 的下面。我试过减少容器的宽度，但这是行不通的。我想在不将类添加按钮放在单独的容器中的情况下完成此操作。该按钮应位于 .i
我在“聊天气泡”旁边有一个用户的图像，但该图像显示在气泡之后。 我如何将图像放在聊天气泡之前并固定在 div 上？ 我的代码在这里:http://www.codepen.io/anon/pen/fFx
编辑 #1:这是问题的图片: 编辑 #2:这是我使用品牌类后的图片 编辑#3: 我正在尝试将图像 float 到导航栏旁边。它一直有效，直到我的导航栏宽度达到 100%。然后导航栏位于图像下方。 这是
我是一名优秀的程序员,十分优秀！