html - 无法降低嵌入的 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;
}
````[![The magnifying glass should be lower][1]][1]


  [1]: /image/DqtzM.png

Answer 1

不确定，我是否理解你的问题。在这里，如果一个 js fiddle ， https://jsfiddle.net/mdsebans/cs7jy0vh/2/

                  #windowSearchDiv {
                    padding: 13px;
                    display: flex;
                    max-width: 300px;
                    text-align: center;
                }

PS: 是一个行内元素，所以如果你使用 display: block 把它变成一个 block 元素，它会另起一行。但是我已经使用 flex 来修复它。