사회 버튼 모두의 수평

Question

먼저 정렬 할 수 없습니다, 누군가가 "정확한 사본"으로이 질문을 닫기 전에, 나는에 대한 사이트를 검색하고 응답하고 도움을 줄 수있는 어떤 :)

나는이 찾을 수 없습니다 사회적인 바가있는 웹 페이지는 그들의 첫 페이지에 Bootstrap 소셜 바처럼 보입니다. 내 사이트는 Bootstrap을 사이트 서식 파일로 사용합니다.

소셜 버튼에 관한 나의 문제. Google+, Twitter 및 Facebook 버튼을 추가했는데 제대로 정렬하는 데 어려움을 겪고 있습니다 ... Facebook 버튼 덕택입니다.

내가 사용하는 코드는 3 개의 소셜 네트워크의 공식 코드와 정확히 같으며 <li>은 <ul>입니다 (다시 한 번 예를 들어 Bootstrap 첫 페이지 참조). 참고 : 일부 배경색과 일부 패딩을 추가하여 명확하게했습니다.

결과는 아래에서 보는 이미지입니다 (IE의 스크린 샷). Google+와 Twitter는 멋지게 작동하지만 Facebook은 어려운 일을합니다 ... 아니면 반대입니까?

내가 시험 (IE, 파이어 폭스, 크롬과 오페라)

UPDATE에 사용되는 모든 브라우저에서 동일한 동작의 예를 보려면이 Fiddle를 방문하십시오.

Answer 1

우선 LI는 모두 같은 높이가 아닙니다. G + 및 Twitter는 25px이고 FB처럼 버튼은 22px입니다. 스타일 시트에 을 추가하여 모든 LI를 동일한 높이로 만듭니다.

그런 다음 LI에 대해서도 vertical-align:middle을 설정하면 멋지게 정렬됩니다.