이미지가 드롭 다운시 텍스트에 맞춰지지 않음

Question

드롭 다운 메뉴를 만들었는데 어떤 이유로 인쇄물과 텍스트가 서로 정렬되도록 이미지와 텍스트를 가져올 수 없습니다. . 이미지가 약간 아래쪽에 있거나 텍스트가 조금 더 높게 위치합니다. 누구든지이 좌절스러운 문제를 해결할 수있는 올바른 방향으로 나를 안내 할 수 있다면 그것은 대단 할 것입니다.

감사합니다.

#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; 
 
}

<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 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 embedd 코드를 등록하면됩니다.