CSS：使用上边距定位项目

Question

ETA：谢谢大家的帮助！ 这些都工作得很好。 非常感谢您的宝贵时间！

我编码一个通讯（实时预览，在这里，我的目标，它在这里），我试图让导航按钮（“加入符合学习支持”）约一半，标志坐。 当我尝试在navButtons类中使用margin-margin时，我看不到任何成功。 我怀疑这是一个显示问题，但是我不确定-从内联更改为内联阻止并没有真正的帮助。

<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>

<style>


div
{
    display: inline;
}

a
{
    text-decoration: none;
}
p
{
    text-align:left;
    margin-left: 130px;
    margin-right: 130px;
    max-width: 600px;

}

#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
    position:relative;
}

#navButtons
{
 position:relative;
 right:-240px;
}

#announcementImage
{
    margin-left: 120px;
    margin-right: 120px;
}


a.joinButton
{
    margin-left:40%;
    color:white;
    background-color: #f7853e;
    font-size: 30px;

}

a.navButton
{
    color:#494541;
    font-size: 22px;

}

</style>
</head>
<body>

<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>

<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url">  Meet  </a>
<a class = "navButton" href="url">Learn  </a>
<a class = "navButton" href="url">Support  </a>
</div>

<br>
<br>
<br>
<br>
<br>

<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>

<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and 
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by 
showing how making art and making money don't have to conflict.

Have a comment on a workshop you've attended or a session you'd like to see in our remaining 
Design and Launch weeks? Galen would love to hear from you!</p>

</div>
</body>

Answer 1

我认为您正在寻找的是：

#logo {
    vertical-align: middle;
}

Answer 2

尝试这个

#logo {
    display: inline-block;
    vertical-align: middle;
}

#nav {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

Answer 3

尝试使用id nav buttons将类似60px的bottom添加到div 。

由于此元素是position: relative ，因此可以使用left ， right ， top ， bottom来控制它的放置，如下所示：

#nav#buttons {
    bottom: 50px;
}

Answer 4

将徽标向左浮动，并在#nav中添加边距即可解决问题。

#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }

Answer 5

你快到了。 内联块是我在绝对定位导航中使用的，但是您有一个通用div {position:inline;}适用于div内页面上的所有内容。 您应该更具体地使用徽标和导航，并通过为每个类提供一个类似<div class="WHATEVER">的类来摆脱通用样式，以便可以定位要使用的div。

然后试试这个：

#logo {
    width: 240px;
    display: inline-block;

#nav buttons {
    margin: 0px 0px 0px 80px;
    display: inline-block;
    position: absolute;
    top: 80px;}

CSS：使用上边距定位项目

问题描述

5 个解决方案

解决方案1
1 2015-11-02 16:42:09

解决方案2
1 2015-11-02 16:47:04

解决方案3
0 2015-11-02 16:38:25

解决方案4
0 2015-11-02 16:45:41

解决方案5
0 2015-11-02 16:56:33

CSS：使用上边距定位项目

问题描述

5 个解决方案

解决方案1 1 2015-11-02 16:42:09

解决方案2 1 2015-11-02 16:47:04

解决方案3 0 2015-11-02 16:38:25

解决方案4 0 2015-11-02 16:45:41

解决方案5 0 2015-11-02 16:56:33

解决方案1
1 2015-11-02 16:42:09

解决方案2
1 2015-11-02 16:47:04

解决方案3
0 2015-11-02 16:38:25

解决方案4
0 2015-11-02 16:45:41

解决方案5
0 2015-11-02 16:56:33