html无法设置p和input标签对齐的问题及解决方案

问题描述：html文档流中存在p，input标签，通过css设置的各自的元素，p标签中line-height已经设置和input标签的高度一样，并且设置display: inline-block;属性，但是文档渲染后两个标签虽然在同一行，并不对齐

css设置如下 ：

.inner p{
		color:white;
		font-size: 27px;
		height: 27px;
		line-height: 27px;
		display: inline-block;
}
/*input标签*/
.inner input:first-of-type{
		border-radius: 6px;
		height: 27px;
		border:none;
}

渲染效果如下：

解决方案：

给p标签加上vertical-align属性并设值为middle

vertical-align:middle;

最终渲染效果：