如何实现inline元素与inline-block元素的垂直对齐？附代码场景

嘿，这个对齐问题真的超常见！先看看你给出的原始代码：

p { display: inline; }
div { 
  display: inline-block; 
  width: 100px; 
  height: 50px; 
  background: black; 
}

<p> Some text <div> </div> </p>

问题根源 #

默认情况下，inline元素和inline-block元素是基于**基线（baseline）**对齐的，这就导致了文字和黑色块没法垂直居中对齐。

解决方案 #

这里有几个简单有效的方法：

方法1：给inline-block元素添加vertical-align: middle

这是最直接的修复方式，只需要修改div的CSS：

p { display: inline; }
div { 
  display: inline-block; 
  width: 100px; 
  height: 50px; 
  background: black; 
  vertical-align: middle; /* 新增这一行 */
}

这样设置后，inline-block元素会和inline元素的中线对齐，完美解决垂直居中问题。

方法2：使用Flexbox布局（更现代的方式）

如果你能调整父元素的布局，可以把p元素改成块级，然后用flex来控制对齐：

p { 
  display: flex; 
  align-items: center; /* 垂直居中对齐子元素 */
}
div { 
  width: 100px; 
  height: 50px; 
  background: black; 
  margin-left: 8px; /* 给文字和块之间加些间距 */
}

<p> Some text <div> </div> </p>

Flexbox的好处是布局更灵活，后续如果调整元素尺寸也不需要额外修改对齐属性。

额外提示 #

哦对了，还有个小细节：HTML规范里<p>标签是不能包含块级元素（比如<div>）的，浏览器会自动把你的结构拆成：

<p> Some text </p>
<div> </div>
<p> </p>

如果需要保持文字和块在同一个容器里，建议用<span>或者直接用一个div作为容器哦～

内容的提问来源于stack exchange，提问作者Jak