Question

我目前正在创建一个公司网站，我有徽标，但我想把它放在导航栏中，对齐它，使它位于最右边，但是在导航栏高度的一半处。我想用CSS做到这一点。

这是我的index.html。

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Bar</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <img src="images/logo.png" alt="Logo" id="logo" onclick="location.replace('index.html', '_top')">
    <div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a href="index.html">Home</a>
            <a href="#Business">Business</a>
            <a href="#Services">Services</a>
            <a href="#LearnMore">Learn More</a>
            <a href="#FreeTrial"><span id="freetrial">Free Trial</span></a>
        </div>
    </div>
</body>
</html>

这是我的main.css

html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}

/* Navigation Bar */

#logo {
text-align: right;
float: right;
}

.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: grey;
margin: 0 10px;
line-height: 70px;
}

#freetrial {
color: #54D17A;
}

label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26 px;
float: right;
}
#toggle {
display: none;
}


@media only screen and (max-width: 500px) {
label {
    display: block;
    cursor: pointer;
}
.menu {
    text-align: center;
    width: 100%;
    display: none;
}
.menu a {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;

}
#toggle:checked + .menu {
    display: block;
    background-color: white;
  }   
}

如果您需要更多解释或任何事情来帮助您回答我的问题，我将非常乐意为您提供帮助，前提是我可以实际回答哈哈。

Answer 1

如果我正在对此进行编码，我会首先将徽标放在导航div中，并使用自己的div围绕它。然后我会使用flexbox（除了IE，btw，它支持到处都是）。

org.jsoup.parser.Parser.unescapeEntities

确保应用＆＃34; display：flex;＆＃34;到父div（大概是nav div）。然后我会申请＆＃34; align-items：center;＆＃34;到导航区。这将使所有菜单项垂直对齐（不确定是否需要）。

然后我会使用＆＃34; justify-content＆＃34;到导航项目。根据您对导航栏中其他项目的操作，您可以使用＆＃34; flex-end＆＃34;或＆＃34;空间 - ＆＃34;。

如果您不想使用flexbox，在将图像移动到导航div中后，应该参考此堆栈溢出问题：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

然后你要设置＆＃34;右：0;＆＃34;在图像或图像div。

另外，我认为您可能错误地使用浮动...

How to vertically align an image inside a div?

你似乎正在使用它们的方式＆＃34;似乎＆＃34;他们应该工作，但他们可能会混淆......我会摆脱你的花车，它可能会搞砸了。对不起，如果您以后想要，我可以更加努力。随意提出任何问题！

如何在导航栏中使用CSS对齐我的徽标？

1 个答案: