左列图像垂直对齐

Question

我正在尝试在左侧的一小列图标和一个右侧的文本字段。

这是我在左侧的尺寸..  

会发生什么情况，我有多个大小不一的文本区域，并且左侧图标未垂直对齐到每个输入字段的中间。

   <div class="form-container ">
                  <div class="leftColumn"> </div>
                  <textarea type="text" name="name" class="titleForm" placeholder="Type Your ..." ></textarea>
            </div>

CSS ：

.form-container{

    margin-top: 0%;
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;

}

.leftColumn{

    background-image:url("/images/tagIcon.png");
    background-size:contain;
    background-repeat: no-repeat;
    display:inline-block;
    float: left;
    width: 5%;
    height: 10%;


}


.titleForm {
    width: 90%;
    height: 10%;
    font-family: LucidaGrande-Bold;
    font-size:36px;
    border: none;
    border-bottom: 1px solid rgba(240,240,240,1.0);


}

我如何制作一个小的，垂直对齐的，左侧的图标？

Answer 1

如何在表单容器中添加display: flex; and align-items: center;？

即类似

.form-container{
  display: flex; 
  align-items: center;
    margin-top: 0%;
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;

}

您可以在此处查看JSfiddle

https://jsfiddle.net/tc5wnvfx/

注意：在小提琴中，我在div之间添加了 test 测试，但是您可以添加图标，它应该可以工作