html - 如何垂直对齐内联元素和内联块元素

Question

说我有以下代码

p {
  display: inline;
}

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

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

创建的是这个

这里的 inline 和 inline-block 元素不是垂直居中的。我将如何使它看起来像这样：

标签： htmlcss

Answer 1

我已经使用了flexcss 并且还添加了一个新的div 我希望这会对你有所帮助。

p {
  display: inline;
  margin: 0;
}
.inner-div {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: black;
}
.outer-div{
  display: flex;
  align-items: center;
  display: -webkit-flex;
  -webkit-align-items: center;
}

<div class="outer-div">
  <p>Some text</p>
    <div class="inner-div"></div>
</div>