jsfiddle with example위치 div의 : 깔끔한가 나타납니다 문장의 볼 카운티 이름을 클릭
결과에 대한 자동 수직 중심에 방법이있다.
필요에 따라 div를 추가하고 있으며 각 div의 배경은 완벽하게 작동하는 CSS 스프라이트에서 가져온 것입니다. 내가 원하는 것은 각각의 추가 된 div를 세로 중심에 두어 더 깔끔하게 정렬하는 것입니다.
position: relative; top: XXpx;을 추가하고 각 크레스트의 상단을 수동으로 수정할 수 있습니다. .Corksmall { background-position: -25px -27px; height: 27px; width: 25px; position: relative; top: 5px;}하지만 그건 무차별 방식처럼 보입니다.
더 많은 코더가이 작업을 수행하는 즐거운 방법이 있습니까? tia
이 동작을 달성하기 위해 간단한 트릭이있다.
#selectedCounties .sprite-smallcrests {
/* float: left; */ /* removed. no need for, because we apply display: inline-block */
display: inline-block;
vertical-align: middle;
}
라이브 데모는 : http://jsfiddle.net/CGcdc/4/
당신은 사진/div의 점프, 각 사진의 높이에 따라 것을 알 수 있습니다.
라이브 데모 : 가능한 가장 높은 영상의 높이와 빈 요소를 붙이는
가, 점프 방지 할 수 당신이 crossbrowser 호환 얻을 span들과 랩퍼 div의 교체하려면 http://jsfiddle.net/CGcdc/9/
또는 기본적으로 인라인 요소 다른 요소 :이 문제 :)
제 생각에는 smallcrests의 중심에 놓고 싶습니다. 그러니 시도해보십시오. 아래의 CSS를 다음과 같이 변경하십시오.
#selectedCounties .sprite-smallcrests {
margin: 10px auto;
}
는 여기가 DEMO 내가 할 것이 무엇
죄송가 해결됩니다
$('#Clare, #Cork, #Limerick').click(function(){ $('<span/>', { title: 'Co. '+this.id, 'class': this.id+'small sprite-smallcrests' }).appendTo('#selectedCounties'); }); 희망, 나는 나는 볏이 수평으로 나타나기를 원하고 각 볏의 중심은 같은 수평선을 따라 앉아있는 것처럼 보일 것입니다. 내가 원했던 최종 결과는 ** http : //jsfiddle.net/CGcdc/3/** 이 예에서는 수동으로 각'top'을 수정했으며 자동으로이 방법을 사용하고자합니다. –
자동으로 무엇을 의미합니까? .. 만약 당신이 그들을 정렬하고자한다면 - 클래스 자체를 사용하여 CSS로 할 필요가 있습니다. –
안녕하세요, 저는 종종 틀린 문구를 사용합니다. 나는 아직도 많은 멍청한 녀석이다. 위의 내 대답을 확인하면 내가 찾고있는 것을 볼 수 있습니다. 도와 주셔서 감사합니다. –
, 똑같은 높이로 각 이미지를 저장하고 이미지를 문서에 수직으로 문장의 위치입니다입니다.
스프라이트 시트의 경우 다음을 의미합니다. 모든 이미지에 하나의 정적 높이를 설정할 수 있도록 충분한 공간을 수직으로 두십시오.
설명 이미지.
아이디어를 제공해 주셔서 감사합니다. 나는 이것을 미래에 사용할 것이라고 확신한다. 위의 대답은 내가이 인스턴스에서 원했던 것입니다. –
@ dos-trois 완벽합니다. 정확히 내가 무엇을 찾고 있었는지. 고맙습니다. –
@Chris IE와 관련하여 좀 더 하위 호환이 가능하도록 만드십시오. http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ 필요한 경우 찾으십시오. – Joonas