이것은 나의 jsfiddle입니다.CSS 이미지 옆의 링크 맞추기
"follow us"링크는 twitter 아이콘 옆에 있습니다. 가능한 경우 인라인 스타일을 사용하지 않고 css을 사용하여 이미지에 수직으로 링크의 중심을 맞추고 싶습니다.
나는 <a> 태그에 직접 클래스를 추가 한 다음 여백을 조정 해 보았습니다. 그것은 작동하지 않았다.
img 태그에 직접 클래스를 추가하고 여백을 조정 해 보았습니다. 그것은 작동하지 않았다.
나는 여백 대신에 여백을 다시 조정하면서이 두 가지를 모두 시도했다.
내가 설정 한 방식 일 수도 있고, html ... 또는 둘 다를 변경해야 할 수도 있습니까?
모든 의견을 보내 주시면 감사하겠습니다.
내가 왼쪽 이미지 float 것이다 참조. 'Follow Us'를 둘러싼 앵커에만 선 높이를 타겟팅하려면 .follow과 같은 앵커에 클래스를 추가하십시오.
HTML
<img src="imageURL.png" width="24px" height="19px">
<a href="#" class="follow"> Follow Us</a>
나는 수레를 취소 한 후, 이미지가 왼쪽으로 떠, 기본적으로, line-height를 사용하는 링크가 왼쪽 뜨고 것이다
img { float: left; }
.follow { line-height: 19px; }
감사합니다. 그게 효과가 있었어. – imakeitpretty
잘 세로 정렬 : 가운데가 더 깔끔하고 간단합니다. 왜 사용하지 않습니까? – darma
'vertical-align'속성은 일부 브라우저, 특히 IE의 경우 매우 유용 할 수 있습니다. – JSW189
조정하려는 <a>과 <img> 모두에서 vertical-align:middle을 설정할 수 있습니다.
편집 : 후 (이 경우, 19px)에서 이미지의 높이와 동등 할 a 태그 line-height 변경 http://jsfiddle.net/Fn4vP/16/
세로 정렬이 사용되지 않는 요소라고 생각했습니다. – imakeitpretty
"align"은 속성으로 사용되지만 모든 CSS 속성에는 사용되지 않습니다! – darma
CSS 다음 <h3> 태그에 , http://jsfiddle.net/Fn4vP/25/
내가 이런 식으로 그것을 할 두 요소를 떠 것이라고 나는 이유는
이제<!-- Dont forget to close your image tag. -->
<img src="http://i46.tinypic.com/2ly6hc4.png" width="24px" height="19px"/>
<a href="#" class="flw-link"> Follow Us</a>
<!-- Added class .flw-link to Follow us link -->
당신의 CSS에서 :
/* Float the image and link to the left */
.twitter-feed img{float: left;}
/* Set the line-height of the text to center vertically to the image */
.twitter-feed .flw-link{float: left; line-height: 21px;}
/* Finally, clear your floats on the next tweet header */
.twitter-feed h3{clear: both;}
체크 아웃이 jsfiddle을 다음에이 부분을 변경 줄 높이를 0으로 변경하려면 옵션을 사용해야합니다. 그러면 텍스트가 맨 위에 오게됩니다. 그런 다음 선 높이를 사용하여 텍스트가 수직으로 배치 된 위치를 픽셀로 제어 할 수 있습니다.
다음은 IE에서 문제를 일으키는 경우의 기사입니다. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – MimiEAM