Html 为什么内联块div会被内部内容搞砸？

我不明白为什么内联块div会因为添加了内部内容而失去它们的位置

我的CSS：

#header {
    height: 80px;
    width: 66%;
    min-width: 1024px;
    top: 0px;
    margin: 0 auto;
    background-color: rgb(128,128,128);
}
#header-left {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 25%;
    left: 0px;
    top: 0px;
    background-color: rgb(128,0,0);
}
#header-center {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 50%;
    background-color: rgb(0,128,0);
    text-align: center;
}
#header-right {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 25%;
    background-color: rgb(0,0,128);
}

我的HTML：

<div id=header-bar><div id=header><div id=header-left></div><div id=header-center><div>Hello</div></div><div id=header-right></div></div></div>

你好 参见小提琴：

---

我想添加内部内容，而不是让它影响其父级的位置。我发现的唯一方法是添加float:left；每个内部元素的样式。必须有更好的方法吗？

您需要更改元素的

垂直对齐

属性值

默认情况下，是的，这就是中心元素的文本与前一个元素的基线对齐的原因（请注意，当元素不包含文本时，不会发生此问题）

如果将

vertical align

属性值更改为类似

top

的值，它将按预期工作：

---

成功了。这是一个简单的解决方案。谢谢你，乔希

#header-center {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 80px;
    width: 50%;
    background-color: rgb(0,128,0);
    text-align: center;
}