CSS：使用上边距定位项目
[英]CSS: Positioning items with top-margin
问题描述
ETA: Thanks for all the help, everyone! 
ETA：谢谢大家的帮助！ These all worked beautifully. 这些都工作得很好。 Thanks so much for your time! 非常感谢您的宝贵时间！
I'm coding a newsletter (live preview here and my goal for it here ) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. 我编码一个通讯（实时预览， 在这里 ，我的目标，它在这里 ），我试图让导航按钮（“加入符合学习支持”）约一半，标志坐。 When I try top-margin in the navButtons class I'm not seeing any success. 当我尝试在navButtons类中使用margin-margin时，我看不到任何成功。 I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help. 我怀疑这是一个显示问题，但是我不确定-从内联更改为内联阻止并没有真正的帮助。
<!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>
5 个解决方案
解决方案1
1 2015-11-02 16:42:09
I think what your looking for is: 我认为您正在寻找的是：
#logo {
vertical-align: middle;
}
解决方案2
1 2015-11-02 16:47:04
Try this 尝试这个
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
解决方案3
0 2015-11-02 16:38:25
Try adding bottom of something like 60px to div with id nav buttons . 尝试使用id nav buttons将类似60px的bottom添加到div 。
Since this element is position: relative , it's placement can be controlled with left , right , top , bottom , like so: 由于此元素是position: relative ，因此可以使用left ， right ， top ， bottom来控制它的放置，如下所示：
#nav#buttons {
bottom: 50px;
}
解决方案4
0 2015-11-02 16:45:41
Floating the logo left, and adding margin to the #nav will do the trick. 将徽标向左浮动，并在#nav中添加边距即可解决问题。
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
解决方案5
0 2015-11-02 16:56:33
You're almost there. 你快到了。 Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. 内联块是我在绝对定位导航中使用的，但是您有一个通用div {position:inline;}适用于div内页面上的所有内容。 You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on. 您应该更具体地使用徽标和导航，并通过为每个类提供一个类似<div class="WHATEVER">的类来摆脱通用样式，以便可以定位要使用的div。
Then try this: 然后试试这个：
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.