logo标签列表

导航栏中的Logo和文本对齐

htmlcss
7
我希望有一个导航栏，其中包含一个标志，但是当我添加标志时，该行看起来不太好！问题在于添加图片时，图片和文本不在同一行上！并非该行断开，但文本会向下滑动一点，而不应该这样。 

body {
  background-color: #C8F1BA;
  margin: 0px;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0px;
}
img#gnb_logo {
  height: 30px;
  margin: 10px;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 50px;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
      <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
      <img id="gnb_logo" src="../images/logo.gif" />
    </div>
  </nav>
</body>

1
尝试将line-height:50px;添加到 nav＃gnb中。在此处查找有关行高的更多信息：https://css-tricks.com/almanac/properties/l/line-height/。 - Akul Von Itram
5个回答
3
如果你在 a.gnb 和 img#gnb_logo 上都添加 vertical-align: middle，那可能就可以解决你的问题。
注意链接的上/下填充，以避免它超出你分配给父容器的 50px 高度。 

body {
  background-color: #C8F1BA;
  margin: 0px;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px;
  vertical-align: middle;
}
img#gnb_logo {
  height: 30px;
  margin: 10px;
  vertical-align: middle;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
  <div id="gnb_bg">
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
    <img id="gnb_logo" src="http://placehold.it/100x50" />
  </div>
</nav>

3
首先，我们需要整理你的HTML。
然后查看你的CSS，如果你正在使用padding等，请将<a>设置为块级元素。
从导航中删除高度为50px的内容，这不是你想要给予高度的东西。相反，使用<a>的padding来获得所需的高度，这有助于响应式设计。
但是因为我们希望它放在你的图像旁边，所以使用inline-block。
同时，不要使用CSS定义<img>标签的高度和宽度，应该使用标签属性，以便呈现平稳。
此外，你需要在图片上使用alt属性。
你的图片还需要以下CSS规则：
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}

让它按照您想要的方式显示在链接旁边。

如果这是您网站的标识，请勿将其放置在<nav>中。

如果它是与链接相关的图标，则可以使用background-image而不是<img>。

body {
  background-color: #C8F1BA;
  margin: 0px;
}
ul,
li {
  list-style: none;
}
div#gnb_bg {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: 10px solid black;
}
a.gnb {
  background-color: #99FF33;
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid #448811;
  padding-right: 2.5%;
  padding-left: 2.5%;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0px;
  display: inline-block;
}
img#gnb_logo {
  vertical-align:middle;
  margin:0 10px;
}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
}
<header>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <ul id="gnb_bg">
      <li>
        <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
        <img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB Logo" />
      </li>
    </ul>
  </nav>
</header>

你太棒了！非常感谢！看了你的回答，我的HTML和CSS水平又提高了！非常感谢！我有几个问题： 在margin中的0是什么意思？你写了“margin: 0 10px;”，它与“margin:10px”有什么区别？ 哦，我发现我的回车没有起作用！没关系 :) - yukashima huksay
@aran margin 是一种在所有方向上声明边距的简写方式。margin: 10px 表示四周都有 10 像素的边距，margin: 0 10px 表示左右两侧没有边距，但上下各有 10px 的边距。此外，margin: 1px 2px 3px 4px 表示底部有 1px 的边距，左侧有 2px 的边距，顶部有 3px 的边距，右侧有 4px 的边距。 - Woodrow Barlow
@aran，很高兴能帮到你。如果你觉得这是正确的答案，请给我那个tik；）哈哈，当你看到marhin或padding或者任何可以在轴上应用像素的东西时，把它想象成一个时钟，所以第一个是顶部，右侧，底部，左侧。它按顺时针方向运行，有助于我跟踪它。 - user4563161
@DCdaz 是的！抱歉，我花了很长时间才能给你你的tik！因为我去旅行了，然后发生了洪水，我们被困在路上！！：D - yukashima huksay
@DCdaz 好啊！:D！既然我给了你漂亮的Tik，你能发封电子邮件给我吗？这样我就可以问你一些更一般性的问题了。：D！aranmhdn@icloud.com - yukashima huksay
显示剩余2条评论
1

首先，如果您想在像"a"标签这样的内联标签上呈现填充，则应该将您的a.gnb类设置为display-block。如果您想使其适合50px高度的容器（14px + 14px填充顶部和底部+ 22px行高等于50px），则您的行高必须为22px。 其次，要使您的图像对齐，请将vertical-align: middle添加到img＃gnb_logo规则中：

body {
    background-color: #C8F1BA;
    margin: 0px;
    padding: 0px;
}
div#gnb_bg{
    margin:0px;
    padding-top:0px;
    padding-bottom:0px;
    border-right:10px solid black;
}
a.gnb{
    background-color: #99FF33;
    text-decoration: none;
    font-size:26px; 
    border-right:1px solid #448811;
    padding-right:2.5%;
    padding-left:2.5%;
    padding-top:14px;
    padding-bottom:14px;
    margin:0px;
    line-height: 22px;
    display: inline-block;
}
img#gnb_logo{
    height:30px;
    margin:10px;
    vertical-align: middle;
}
nav#gnb{
    text-align:center;
    background-color: #99FF33;
    height: 50px;
}
0
你需要移除边距。
img#gnb_logo{
height:30px;
margin:0px;
}

请查看实时演示。

body {
background-color: #C8F1BA;
margin: 0px;
}

#gnb{
    padding:10px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px; 
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
}
img#gnb_logo{
height:30px;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
    <a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
    <img id="gnb_logo" src="http://placehold.it/100x50"/>
    </div>
</nav>

0
<!DOCTYPE html>
<html>

<head>
<style>
body {
  background-color: #C8F1BA;
  margin: 0px;
}

a.gnb {
  text-decoration: none;
  font-size: 26px;
  border-right: 1px solid black;
  vertical-align: middle;
  padding-right: 1%;
  padding-left: .2%;
  padding-top: 5px;
  padding-bottom: 5px;
}
img#gnb_logo {
  height: 30px;
vertical-align: middle;
margin:5px 0px;

}
nav#gnb {
  text-align: center;
  background-color: #99FF33;
  height: 40px;
}
</style>
</head>

<body>
  <nav id="gnb" role="navigation" aria-label="Global Navigation">
    <div id="gnb_bg">
      <img id="gnb_logo" src="http://placehold.it/100x50" />
      <a class="gnb" href="../feedbacks/feedbacks.html">Website</a>
    </div>
  </nav>
</body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接