Search code examples
htmlcsscentervertical-alignment

Unable to vertically center my image

I’m trying to center, vertically, an image that will be my submit button. I have this HTML

<div style="display:inline-block; vertical-align:middle"><input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button"></div>

and then this class tied to the image

.search_button {
        vertical-align: middle; 
}

However, the image is still aligned at the top of the DIV. The image is broken in the middle, but you can see the alt text aligning to the top — https://jsfiddle.net/hLn6fv49/ . How do I align it vertically?

Solution

  • You have to align all divs: 

    div#statSearchFields div {
    vertical-align: middle;
}