Question

我一直在创建一个下拉菜单，出于某种原因，我无法为我的生活获取下拉中的图像和文本以便彼此对齐。图像略低或文字略高。如果有人能指出我正确的方向来排序这个令人沮丧的问题，那将是不可思议的。

谢谢你们。

＆＃13;

#dropdown {
  display: block;
  background-color: fff;
  border-left: 2px solid #e1dfe1;
  border-right: 2px solid #e1dfe1;
  border-top: 2px solid #e1dfe1;
  width: 40%;
  position: absolute;
  right: 50px;
  top: 80px;
}

#dropdown p {
  display: inline-block;
  margin: 0;
  padding: 5px;
}

#dropdown img {
  margin-left:30%;
  display: inline-block;
  padding: 5px;
}

#ddSets {
  border-bottom: 2px solid #e1dfe1;
}

＆＃13;

<div id="dropdown">
  <div id="ddSets">
    <p><strong>Settings</strong></p><br>
    <img src="http://pa2.sulmaxcp.com/IMAGES/MyAccount.svg" width="20px" height="20px" ondragstart="return false;">
    <p>My Account</p><br>
    <img src="http://pa2.sulmaxcp.com/IMAGES/Sub-Users.svg" width="20px" height="20px" ondragstart="return false;">
    <p>Sub-User</p><br>
  </div>
  <div id="ddSets">
    <p><strong>Support</strong></p><br>
    <img src="http://pa2.sulmaxcp.com/IMAGES/Email.svg" width="20px" height="20px" ondragstart="return false;">
    <p>Email Us</p><br>
  </div>
  <div id="ddSets">
    <img src="http://pa2.sulmaxcp.com/IMAGES/Logout.svg" width="20px" height="20px" ondragstart="return false;">
    <p>Log Out</p><br>
  </div>
</div>

＆＃13;

Answer 1

答案是：

#dropdown img {
  vertical-align: middle;
}

#dropdown {
  display: block;
  background-color: fff;
  border-left: 2px solid #e1dfe1;
  border-right: 2px solid #e1dfe1;
  border-top: 2px solid #e1dfe1;
  width: 40%;
  position: absolute;
  right: 50px;
  top: 80px;
}

#dropdown p {
  display: inline-block;
  margin: 0;
  padding: 5px;
}

#dropdown img {
  margin-left:30%;
  display: inline-block;
  padding: 5px;
  vertical-align: middle;
}

#ddSets {
  border-bottom: 2px solid #e1dfe1;
}

<div id="dropdown">
  <div id="ddSets">
    <p><strong>Settings</strong></p><br>
    <img src="http://pa2.sulmaxcp.com/IMAGES/MyAccount.svg" width="20px" height="20px" ondragstart="return false;">
    <p>My Account</p><br>
    <img src="http://pa2.sulmaxcp.com/IMAGES/Sub-Users.svg" width="20px" height="20px" ondragstart="return false;">
    <p>Sub-User</p><br>
  </div>
  <div id="ddSets">
    <p><strong>Support</strong></p><br>
    <img src="http://pa2.sulmaxcp.com/IMAGES/Email.svg" width="20px" height="20px" ondragstart="return false;">
    <p>Email Us</p><br>
  </div>
  <div id="ddSets">
    <img src="http://pa2.sulmaxcp.com/IMAGES/Logout.svg" width="20px" height="20px" ondragstart="return false;">
    <p>Log Out</p><br>
  </div>
</div>

Answer 2

您可以使用像FA这样的图标设置：

<div id="dropdown">
  <div id="ddSets">
    <p><strong>Settings</strong></p><br>    
      <i class="fa fa-user" ondragstart="return false;"></i>
    <p>My Account</p><br>    
    <i class="fa fa-users" ondragstart="return false;"></i>
    <p>Sub-User</p><br>
  </div>
  <div id="ddSets">
    <p><strong>Support</strong></p><br>
    <i class="fa fa-paper-plane" ondragstart="return false;"></i>
    <p>Email Us</p><br>
  </div>
  <div id="ddSets">
    <i class="fa fa-sign-out" ondragstart="return false;"></i>
    <p>Log Out</p><br>
  </div>
</div>

将img类重命名为i（或创建i类）并声明一个免费的Font Awesome嵌入代码。

图像在下拉列表中不会与文本对齐

2 个答案: