无法降低嵌入的div元素余量

Question

在对话框窗口中，我有以下div“ windowSearchDiv”，其中包含以下代码中显示的3个元素。我正在尝试垂直对齐标签，文本输入和放大镜图像。标签和文本输入很好。但是，由于某种原因，我无法单独移动放大镜图像以使其与其他2个元素垂直对齐。什么CSS可以在这里帮助我？

                    <div id="windowSearchDiv">
                        <label for="windowMasterSearchBox" id ="windowMasterSearchBoxLabel">Search: </label>
                        <input type="text" id="windowMasterSearchBox" placeholder="Enter Student Name..." />
                        <a title="Search Students" id="windowMasterMagnifyingGlass"><img src="/images/icons/magnify.gif" alt="Search Students" border="0" /></a>  
                    </div>

                    #windowMasterMagnifyingGlass {
                        float: none;
                        margin-top: 1px;
                        margin-right: 351px;
                        cursor: pointer;
                        margin: auto;
                    }


                    #windowMasterSearchBox, #windowMasterSearchBox {
                        margin: auto;
                        margin-bottom: 7px;
                    }

                    #windowSearchDiv {
                        padding: 13px;
                        display: block;
                        text-align: center;
                    }

Answer 1

不确定，如果我理解您的问题是对的。如果一个JS摆弄，https://jsfiddle.net/mdsebans/cs7jy0vh/

            #windowSearchDiv {
                padding: 13px;
                display: flex;
                flex-flow: column wrap;
                text-align: center;
            }

PS：是一个内联元素，因此，如果使用display：block将其变成一个块元素，它将在新行开始，