CSS：定位具有頂部邊距的物品

-1

ETA：感謝所有人的幫助，每個人！這些都很精美。非常感謝您的時間！CSS：定位具有頂部邊距的物品

我編碼一個通訊（實時預覽here和我爲它here目標），並想獲得導航按鈕（「加入符合學習支持」）中途坐約下來的標誌。當我在navButtons類中嘗試頂部邊距時，我沒有看到任何成功。我懷疑這是一個顯示問題，但我不確定---從內聯切換到內聯塊並沒有真正的幫助。

<!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>

來源

2015-11-02 user2458123

'#logo {垂直對齊：中間}'？那是你在找什麼？ – Krii

與@Krii同意。因爲'＃logo'和'id =「導航按鈕」'（無效的ID btw。參見[w3c文檔]（http：/ /）），'vertical-align：middle'將在這種情況下起作用/www.w3.org/TR/html4/types.html#type-id））是'inline'或'inline-block'。 –

嘗試增加的像60像素bottom到div id爲nav buttons。

由於該元素是position: relative，它的位置可以用left控制，right，top，bottom，就像這樣：

#nav#buttons { 
    bottom: 50px; 
}

來源

2015-11-02 16:38:25 Justas

我覺得你想找的是：

#logo { 
    vertical-align: middle; 
}

來源

2015-11-02 16:42:09 Krii

浮動該徽標離開，並增加了#nav的餘量將訣竅。

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

來源

2015-11-02 16:45:41 sshhDaniella

試試這個

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

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

來源

2015-11-02 16:47:04

垂直對齊的標誌是關鍵。 – nickles80

你幾乎沒有。內聯塊是我用絕對定位的導航，但你有一個通用的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;}

來源

2015-11-02 16:56:33

CSS：定位具有頂部邊距的物品

回答

相關問題