HTML/CSS 內聯塊 div 對齊
[英]HTML/CSS Inline-block div alignment
問題描述
首先，我剛剛開始用 HTML 和 CSS 編寫代碼，所以我的問題可能非常簡單。 我提供了 2 個 JSFiddle 鏈接，希望能說明我的問題所在。 我基本上想要實現的是我的按鈕 div 與我的徽標 div 對齊，並且它們水平居中。 在徽標 div 中，我計划僅使用背景圖像。
在這方面，它們似乎對齊，但我必須在徽標 div 中使用文本。
這就是我刪除文本時的樣子。 （不像我想要的那樣對齊）。
這是 HTML 代碼
<html>
<head>
<link href="site.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Orbitron:400,700,900,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="logo">x</div>
<div id="buttons">
<div class="button">Button1</div>
<div class="button">Button2</div>
<div class="button">Button3</div>
<div class="button">Button4</div>
<div class="button">Button5</div>
</div>
</div>
</body>
</html>
出於某種原因，我無法正確格式化 CSS 代碼，因此請檢查鏈接。
編輯：
#header{
width: 100vw;
min-width: 1280px;
height: 100px;
background-color: #191919;
padding: 0;
margin: 0;
border: 0;
white-space: nowrap;
}
#logo{
width: 400px;
height: 100%;
padding: 0;
margin: 0;
border: 0;
color: #ffffff;
display: inline-block;
}
#buttons{
height: 100%;
width: 800px;
padding: 0;
margin: 0;
border: 0;
display: inline-block;
}
.buttons{
height: 100%;
width: 160px;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
padding: 0;
margin: 0;
color: #ffffff;
display: inline-block;
}
2 個解決方案
解決方案1
1 已采納 2015-10-17 15:15:35
試試這個https://jsfiddle.net/9Y7Cm/10924/
將此添加到 CSS
#logo {
float: left;
}
#logo img {
height: 100%;
}
編輯
如果你刪除width: 400;你也會得到這個https://jsfiddle.net/9Y7Cm/10926/ width: 400; 來自#logo
編輯 2
解決方案2
0 2015-10-17 15:27:13
你的 HTML 結構不是特別好。 但是僅此代碼就可以內聯所有內容。
#header div {display:inline-block;}
或者：
#logo {float:left;}
#buttons {float:left;}
#buttons .button {display:inline-block;}
這是更好的做法，因為它僅顯示您的按鈕列表內聯，這為您的徽標和其他元素提供了更大的靈活性。
Div內聯塊垂直對齊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.