CODEWITHSUNDEEP
htmlcss
Curnelious
Curnelious

Reputation: 1

Left column image vertically align

I am trying to have a small left icon column, and right text field.

This is what I got on the left size .. enter image description here

What happens is that I have multiple text areas some big some small, and the left icon is not vertically aligned to the middle of each input field.

   <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);


}

How would I make a small, left, vertically aligned icon , with right input field ?

Upvotes: 2

Views: 458

Answers (1)

Alwaysblue
Alwaysblue

Reputation: 11850

How about adding display: flex; and align-items: center; in your form container?

i.e something like this 

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

}

You can see the JSfiddle here

https://jsfiddle.net/tc5wnvfx/

Note: In the fiddle I have added test in between my div Test but you can include icon and it should probably work

Upvotes: 2

Related Questions