html - 左列图像垂直对齐

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;和 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/

注意:在 fiddle 中我添加了 test in between my div Test 但你可以包含图标，它应该可以工作