实现行内块元素与文本垂直对齐

一般的 <img> <textarea> 这种标签在默认情况下与 文本元素  基线对齐, 

默认情况下的 <img>标签底部会有一小部分的空白层， 可使用 vertical-align属性清除,或将 <img> 转换为块状元素 display:block

要使得行内块元素与文本垂直对齐 ， 只需在行内块元素添加属性  vertical-align: middle; 

<style>
    .img {
        width: 100%;
        height: 300px;
        background: #ccc;
    }
    .img img {
        vertical-align: middle;
    }
    .img-box textarea {
        height: 100px;
        vertical-align: middle;
        resize: none;  /* 使得输入框无法拖拽放大缩小*/
    }
</style>

<div class="img">
    <div class="img-box">
        <textarea>123</textarea>123
    </div>
    <img src="../image/产品分类/list-1.png" alt="">123
</div>