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

Question

说我有以下代码

p {
  display: inline;
}

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

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

这是创建的

此处，内联和内联块元素未垂直居中。 我将如何使其看起来像这样：

Answer 1

我使用过div CSS，还添加了一个新的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>

{{1}}

Answer 2

只需向

标签

添加左浮点数

p{
display: inline;
float:left;
}

这将使两个元素正确对齐