HTML/CSS 内联块 div 对齐

Question

首先，我刚刚开始用 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;
}

Answer 1

试试这个https://jsfiddle.net/9Y7Cm/10924/

将此添加到 CSS

#logo {
  float: left;
}

#logo img {
  height: 100%;
}

编辑

如果你删除width: 400;你也会得到这个https://jsfiddle.net/9Y7Cm/10926/ width: 400; 来自#logo

编辑 2

中心按钮https://jsfiddle.net/9Y7Cm/10927/

Answer 2

你的 HTML 结构不是特别好。 但是仅此代码就可以内联所有内容。

#header div {display:inline-block;}

或者：

#logo {float:left;}
#buttons {float:left;}
#buttons .button {display:inline-block;}

这是更好的做法，因为它仅显示您的按钮列表内联，这为您的徽标和其他元素提供了更大的灵活性。

HTML/CSS 内联块 div 对齐

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-10-17 15:15:35

解决方案2
0 2015-10-17 15:27:13

HTML/CSS 内联块 div 对齐

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-10-17 15:15:35

解决方案2 0 2015-10-17 15:27:13

解决方案1
1 已采纳 2015-10-17 15:15:35

解决方案2
0 2015-10-17 15:27:13