Question

我有3个显示内嵌块的div，它们水平对齐：

div {
  background:blue;
  height:200px;
  width:30%;
  margin:0px;
  padding:0px;
  border:10px solid red;
  display:inline-block;
  box-sizing:border-box
}

enter image description here

当我将一个文本元素添加到其中一个div中时，它会被降低*（除非文本为position:absolute;）。
enter image description here

这是什么原因？

http://jsbin.com/suweba/2/edit

Answer 1

您需要使用CSS将vertical-align: top添加到div。 vertical-align的默认属性为baseline，这就是您的div内容向下移动到底部的原因。

这是 jsBin demo 。

div {
  background: blue;
  height: 200px;
  width: 30%;
  margin: 0px;
  padding: 0px;
  border: 10px solid red;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box
}
#b {} text {
  /* position:fixed; */
  color: white;
  font-size: 20px;
}

<body>
  <div id="a">
    <text>hello</text>
  </div>
  <div id="b"></div>
  <div id="c"></div>

Answer 2

使用vertical-align: top时添加display: inline-block。 inline-block的自然位置为baseline。

JSBIN

添加文本元素会破坏div布局

2 个答案: