HTML/CSS内联块div对齐_Html_Css

HTML/CSS内联块div对齐

html css

HTML/CSS内联块div对齐,html,css,Html,Css,首先，我刚刚开始用HTML和CSS写作，所以我的问题可能很简单。我已经提供了2个JSFIDLE链接，希望能说明我的问题所在。我基本上想要实现的是，我的按钮div与我的logo div对齐，并且它们水平居中。在logo div中，我计划只使用背景图像在中，它们似乎对齐，但我必须在logo div中使用文本。这就是我删除文本时的外观。（没有像我希望的那样对齐）。下面是HTML代码 <html> <head> <link href="site.css"

首先，我刚刚开始用HTML和CSS写作，所以我的问题可能很简单。我已经提供了2个JSFIDLE链接，希望能说明我的问题所在。我基本上想要实现的是，我的按钮div与我的logo div对齐，并且它们水平居中。在logo div中，我计划只使用背景图像
在中，它们似乎对齐，但我必须在logo 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

#logo {
  float: left;
}

#logo img {
  height: 100%;
}

编辑

如果删除

width:400来自#徽标

编辑2
中间按钮
您的HTML结构不是特别好。但仅此代码就可以将所有内容内联
#header div {display:inline-block;}

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

这是一种更好的做法，因为它只内联显示您的按钮列表，这为您的徽标和其他元素提供了更大的灵活性。
请在您的问题中发布CSS，并尝试格式化它。如果出现问题，任何具有足够权限的用户都可以解决。没有CSS，你的问题就失去了价值。谢谢你。然而，我还想让logo div和button div水平居中。在更高分辨率的屏幕上，徽标现在始终保持在屏幕的左侧，而如果我在标题中使用文本对齐：居中，则按钮会稍微居中。您可以将徽标和按钮放在一个div
内，并设置宽度和边距：0自动在那个div中，我已经在标题div中找到了它们，宽度设置为100vw，我尝试使用边距：0 auto
而不是边距：0
，但它似乎没有任何作用。谢谢你，效果很好。如果你有时间，你能解释一下你做了什么吗？从我所看到的唯一主要区别是使用垂直对齐：中间
，但它们不应该默认对齐吗？好问题，我不确定。您使用display:inline block
设置了inline align，但我认为您需要为垂直对齐设置vertical align:middle，但我可能错了。如果这解决了您的问题，请接受anwser。虽然它确实很好地对齐了徽标div和按钮div，但我现在不知道如何将它们水平居中。我建议您发布更新的代码，并提供更多有关您希望它看起来如何的信息。很难说如何最好地居中，因为有一系列的技术可以使用。
#logo {float:left;}
#buttons {float:left;}
#buttons .button {display:inline-block;}