Mike Mike - 3 months ago 8
HTML Question

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?

Answer

You have to align all divs:

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