图片和下拉菜单不对齐答案

【问题标题】：Image and dropdown not line up图片和下拉菜单不对齐
【发布时间】：2021-08-04 01:39:44
【问题描述】：

目前我有一些图片链接和一个下拉菜单。但是，图片高于下拉菜单，我怎样才能让它们对齐？

<a id="nextid" href="javascript:PrePage()"><img src="/graphics/newIcons/previous.png" style = "height: 19px; width: 19px;" title = "Next"></img></a>
<a id="preid" href="javascript:PreCommentPage()"><img src="/graphics/newIcons/previous.png" style = "height: 19px; width: 19px;" title = "Next"></img></a>  
<select name="cars" id="cars">
  <option value="saab">General Comments  -4 comments(s)</option>
</select>

【问题讨论】：

标签： html css styles

【解决方案1】：

您应该在您的 img 标签中使用vertical-align: middle 属性

#nextid, #preid {
    vertical-align:middle;
}

<a id="nextid" href="javascript:PrePage()"><img src="/graphics/newIcons/previous.png" style = "height: 19px; width: 19px;" title = "Next"></img></a>
<a id="preid" href="javascript:PreCommentPage()"><img src="/graphics/newIcons/previous.png" style = "height: 19px; width: 19px;" title = "Next"></img></a>  
<select name="cars" id="cars">
  <option value="saab">General Comments  -4 comments(s)</option>
</select>

【讨论】：

【解决方案2】：

将代码包装在 div 容器中，并使用 flexbox，如下所示：

.container {
  display: flex;
  align-items: center;
}

<div class="container">
  <a id="nextid" href="javascript:PrePage()"><img src="/graphics/newIcons/previous.png" style="height: 19px; width: 19px;" title="Next"></img>
  </a>
  <a id="preid" href="javascript:PreCommentPage()"><img src="/graphics/newIcons/previous.png" style="height: 19px; width: 19px;" title="Next"></img>
  </a>
  <select name="cars" id="cars">
    <option value="saab">General Comments -4 comments(s)</option>
  </select>
</div>

【讨论】：