IT를 표현

또 빠른 차다. 여기 간단하고 CSS의 전원을 사용하여 좋은 일이에요 ..하지만 처음부터 어려운 concieve (그리고 그것이 반드시 내가 아냐)했습니다. Dropshadow를 추가하면, 포토샵 anf 불꽃놀이 등 편집 도구를 몇 가지 이미지를 사용, 우리 중 많은 케이크 peice 수도
제가 CSS를 이용한 드롭 섀도우를 위해 사용하도록 선택한 이유는 일반적으로 응용 프로그램의 페이지 디자인 / HTML을 만드는 동안, 요건 iterating 유지한다는 것입니다. 제가 freinds 목록 또는 이미지 갤러리를 표시하는 것과 같은 다양한 이미지와 기존의 웹 사이트에 가서는 무슨 뜻인지, 그것을 위해, 재처리 이미 추가하거나 그림자를 제거하는 언로 드했던 이미지의 전체 하중에 어려울 것입니다 문제.
이러한 여분의 부서 또는 추가할 HTMLS을 만드는 동안 좀 성급 생각했을 그렇다면 일반적으로 상황이 당신이 XSL, PHP에서 이러한 아이콘 / 축소판을 생성 루프 로직을 가지고있다는 것입니다. 자바 또는 다른 프로그래밍 / 스크립트 언어 당신이 언제든지 추가할 수 있습니다 다음, 연기 토록 요구 사항을 변경하는 클라이언트에 따라, CSS의 디스플레이 속성을 사용하여 이러한 그림자를 숨기고의 문제가 ... 내가 앞으로 생각하고 이런 일을 havn't 전에도 ...하지만 ahev 지금 시작!

아래 예제에서 원본 이미지는 그림자 무료이며 dropshadows이 필요한 경우 적용됩니다! 또한, 생각을 내 앞에서 혀를의 기술 (Well! 이들은 아마 자습서의 짧은 다양하므로 그것만이 그들을 '차다'의 호출 정당)을 사용하여, 약간의 여분을 간 CSS 클립 속성을 사용 과시에 대해서만

원본 이미지

CSS의 DropShadow 결과

데모보기 | 다운로드 sourcefiles을

내가 왜 이것을 이해할까요?? Humm ...!!

CSS의 작가 대부분은 CSS의 클립 속성이 대부분 취소 사용되는 CSS 속성 중 하나입니다 동의할 것입니다. 그것은 내게도 그렇게 사실과 내가 수정 시작하기 전에는 그것을 소홀히하는 것이 가장 행복 했어요 MOOTOOLS 두 노브 (핀) 슬라이더 구성 요소 (범위 표시기 포함) .

슬라이더 범위를 나타내는 데 이어 backgroud 이미지를 (가변 폭 부문에 대한)를 사용하여 슬라이더 구성 요소를 수정하는 구성 요소 사용자 중 하나에서 좋은 제안이 있었다. 따라서 재미 있지만 CSS 클립 속성의 바다 (ME 당연히)를 해제 전세를 입력하는 시간이 왔어요.

글쎄! 그것은 얼마나 어려운가 될 수 있습니까? 별로요도 전혀 ... 그렇기도하고 아니기도합니다. CSS의 클립 속성을 사용하는 문법은 꽤 똑바로지만 의미 / usuage 조금 croocked입니다. 내것과 같은 메모리로 매번 내 슬라이더 스크립트에 재작업에 앉아서 ... 내 자신에게 내 스크립트에서 만든 논리를 상기시켜,이 클립 속성의 사용으로 언급 tokeep이 있는데 .... 그래서! 그 미래의 (그리고 또한 보이는 자들의 이익을 위해 CSS 클립 속성에 의해 boggled) 기억 희망으로 펜을 내려으로 생각

CSS의 클립은 무엇입니까?

클립은 CSS 2.1 시각 효과 모듈의 일부입니다. 간단히 말하면, 그것의 임무는 따라서 추가 파일을 (나는 이미 슬라이더 구성 요소에 더 사용이 기능을 삽입한 만들 필요없이 이미지를 클리핑하고 축소 이미지를 생성, 이어중인 개체의 위에 보이는 창을 배치하는 것입니다 )

CSS의 클립 속성을 사용하면 rect 모양을 사용하여 클리핑을 만들 수 있습니다. rect를 사용하여 많은 다른 CSS 속성 (여백, 패딩 등 등), 마찬가지로 필요 네 좌표 위쪽, 오른쪽, 아래쪽, 왼쪽 (TRBL). 당신이 네 개 좌표를 (잠시 던지기로 두뇌를 전송)를 사용하여, 클립 클리핑 영역을 계산하는 방법에 더 자세히 살펴봐야 할 때이 속성의 croocked 자연 반영합니다. 이제 혼란 하단은 상단에서 시작, 오른쪽은 왼쪽부터 시작됩니다. . 당신은 내가 하는말 보이지? .... 따라서이 게시물을 ...

이것은 약간의 혼란은 쉽게 아래와 같이 CSS를 클립 / rect 재산의 시각적 설명과 함께 사라질 수있다!!

CSS의 클립 요건

우리가 시작한 작업은 (또한 광각 이미지) squarer 원하는 이미지로 다음 썸네일 이미지를 고정하는 것입니다

기존 Thumbnal / 이미지	Sqaure Thumbmail 용 클립 요건

CSS의 클립 결과

데모보기 | 다운로드 sourcefiles을

이 질문은 몇 번하기 전에 내 마음이 들기도 내가 전에도 사이트에 근무했을 때 어느 사이트 / 워드 프레스 PHP에서 주위 초보자를 portal.Being의 일부분 블로그 또는 콘텐츠의 새로운 종류를 표시하는 워드 프레스를 사용하여, 나는 계속 "이 케이크 나의 peice 아니다"생각을 procastinating. 드디어! 솔루션에 대한 약간의 주위를 은요을 시작했을 때이 요구 사항은, 코에 최대 개까지 왔어요.
저는 이것이 정말 내가 실제로 그냥 PHP의 작은 비트와 워드 프레스 API를 사용하여 워드 프레스 구동 섹션 이외의 다른 페이지에 헤드 라인의 목록이나 최신 게시물을 표시하는, 생각보다 쉽게 것을 찾기 위해 놀랐다 .

여기 어떻게있다 : -
설명의 이유로 귀하의 사이트가 있다고 가정 http://www.inchembur.com/ 하고이 사이트의 뉴스 섹션이 http://news.inchembur.com/를 (워드 프레스를 실행하는). 지금 요구에서 최신 게시물을 보여주는 것입니다 http://news.inchembur.com/ 즉, 메인 사이트의 홈 페이지에 http://www.inchembur.com/index.php

1 단계 : 귀하의 index.php에서 다음과 같은 코드 peice를 추가, 워드 프레스의 API 파일을 포함합니다. 당신은 당신의 게시물에 표시하고자하는 페이지의 상단에 이것을 추가할 수 있습니다.

<? PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme 정의 ( 'WP_USE_THEMES', 허위); 워드 프레스 테마의 / / Disbable 사용
( '은 / var / news.inchembur.com / WP-의 블로그-header.php') 요구, / /는 워드 프레스 API를 포함
; // Get Latest Post query_posts ( 'showposts = 1'); / / 최근 게시물 가져오기
?>

포함의 위 peice에서 우리는 오직 하나의 최근 게시물을 받고있다. 당신이 노력한다면 많은 변화가 캐다 부담 query_posts() 설명서 .

2 단계 : 자, 당신의 최신 워드 프레스의 게시물을 보여주고 싶은 색인 / 홈 페이지의 일부 http://news.inchembur.com , 다음 코드를 사용합니다. 라고 광고하여 스타일링 부서, 지속 기간 및 설계 요구 사항마다 같은 수업을 무료로 느낄 필요도없이.

Step3 : 어떤 단계 3은 없습니다 ... 다 됐죠 ... 너희는 끝났어!

최근 포스트 반대로 어떻게 특정 게시물 / 페이지 표시 : -
이것은 쉽게 인자를 변경하여 achived 수 query_posts() 페이지 ID 또는 페이지 슬러그를 포함

) ; query_posts ( 'page_id = 7');
) ; query_posts ( '페이지 이름 = 약');

또는 당신은 게시물의 수를 제어할 수 있습니다 :
) ; query_posts (showposts = 3);

때로 pageweight을 지키기 위해 우리는 파편으로 우리의 스크립트를 분할했습니다 ... 필요할 때 이러한 자바 스크립트 조각과 같이로드하실 수 있습니다 (이벤트 또는 기타 링크 또는 단추를 클릭합니다).

로드 Javascripts 동적으로 간단하고 아주 똑바로 앞으로 아래와 같습니다 ...

= “text/javascript” > <스크립트 유형 = "텍스트 / 자바 스크립트">
함수 loadNewScript (소스) {
VAR S = document.createElement ( '스크립트');
s.setAttribute ( '유형', '텍스트 / 자바 스크립트');
s.setAttribute ( 'SRC', 소스);
document.body.appendChild (들);
}
</ SCRIPT>

그리고 당신은 어디서나 본문에 다음 호출 링크를하거나 문서 자체의 스크립트 "onLoad"를 가질 수 ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > 해서 <a href = "자바 스크립트 : loadNewScript ( 'myDynamicScript.js');"> 하중 동적 스크립트 </ a>

또는

<body onload="loadNewScript('myDynamicScript.js');">

당신의 CSS 인 경우 크로스 브라우저를 작동하여 레이아웃을 받고있는 고통을 알게 될 것입니다. IE8은 아직 우리가 개발자를위한 작품의 다른 스패너입니다. Anywaz! 난 당신없이 작동 IE7에서 CSS (및 이전 버전)과 파이어 폭스가 갑자기 IE8에 tantrums를 던지고 시작했습니다 어제를했던 것처럼,이 문제에 따라 생기면, 이걸 써봐 그것은 멋지게 순간 내 문제를 해결하는 것 같았다 ....

메타 선언을 이용하여 우리는 IE8 사용하려는 렌더링 엔진을 지정할 수 있습니다. 그래서 IE8은 IE7로 렌더링하도록 강요 ... 당신의 문서의 헤드에 다음 메타 태그를 삽입 : -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

기본적으로 IE 메타는 다음과 같습니다 -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
이는 Internet Explorer 8은 새로운 표준 모드를​​ 사용하여 페이지를 렌더링 할 것입니다.

필요한 경우이 구문은 아래에 다른 브라우저를 위해 수용하는 데 사용할 수 있습니다 :

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

DOCTYPES에 대하여 추가 :

당신이 아직 "DOCTYPE"라는 동물의 종류에 익숙하지 않은 경우가 여기 몇몇 빨리 읽고있다
DOCTYPES은 무엇입니까? 브라우저 만지면 및 엄격한 모드는 무엇입니까?
XSL에 DOCTYPE 설정

DOCTYPES에 대해 깊이 이해 자세한 내용은 다음 링크를 방문해보십시오 ...
이외에도 목록 : 오른쪽 DOCTYPE 사용하여 사이트를 고쳐 내라!
이외에도 목록 : DOCTYPE 넘어 : 웹 표준, 앞으로 호환성과 IE8

참고 : 비록 우리 중 많은 HTML / CSS를 사람들이 올바른 DOCTYPE을 설정, 우리의 문서에 DOCTYPE decleration의 중요성을 무시되었으며, 대부분의 크로스 브라우저 문제에 대한 답변은 보통입니다.

뿐만 아니라 Mootools에 대한 여러 밖에 Carousels, 다양한으로 난 여전히 좋은 이유로 내 자신의 회전 목마 클래스를 작성하기로 결정
1. 페이징 기능 (회전 목마에서 특정 슬라이드 / 단계를 점프하는 법) 구함.
2. 왼쪽 및 오른쪽 버튼 / 링크의 배치와 자유는 어디까지 내주십시오 싶었어요.
3. 슬라이드 스텝을보다 효율적으로 관리할 수 있습니다.

나는 위의 기능, 새로운 회전 목마를 만들 한거 ... 아래로 ... 필요한 것입니다! 수정을 제안 부담없이!

내 예제는이 ... [모양 보기 데모 ]

데모보기 | 페이징 버전 1.0으로 다운로드 Mootools 회전 목마를 (1991 회 다운로드)

1. 회전 목마다 페이징

당신은 쉽게 간단하게 true로 MooCarousel의 인스턴스를 만드는 동안 전달된 마지막 parater이다 페이징 플래그 (원하는 페이징) 또는 false를 (donot가 페이징을 원하는) 설정하여 여러분의 회전 목마에 페이징을 추가할 수 있습니다.

VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실); / / NS 슬라이드 = 수, SSS는 = 슬라이드 스텝 크기

그리고 당연히 당신은 그들의 CSS를 수정하여 원하는대로 이러한 페이징 achors의 모양-N-느낌을 변경할 수 있습니다.

. carousel_paging {텍스트 정렬 : 오른쪽, 여백 : 5px 10px 0 0;}
. carousel_paging 전류, carousel_paging 페이지 {개요 : 없음; 폭 :... 15px; 높이 : 15px; 라인 높이 : 15px; 텍스트 정렬 : 센터; 디스플레이 : 블록; 플로트 : 왼쪽; 배경 : # D8D8EB는; 여백 : 0 1px 0 0; 텍스트 장식 : 없음;}

. carousel_paging : 가져가, carousel_paging 현재 {배경 : # 4D4D9B; 색깔 : # FFFFFF;}..

글쎄! 작은 문제에도 불구하고있다, 페이징 앵커가 세트면 그것은 회전 목마 컴포넌트 후 항상 생성된다. 난 그게 역동뿐만 아니라 확인하고 싶었어하지만 그때 막 비율 나가 불고위한 Script를 유지하기 위해, 내가 건너하기로 결정했습니다.
하지만 넌 어린 자바 스크립트를 알고, 당신은 쉽게 당신의 요구를 만족시킬려고 MooCarousel 클래스에서 페이징 생성 코드를 수정할 수 있습니다.

2. 왼쪽 및 오른쪽 아이콘 Customising

당신은 간단하게 CSS로 장난치는에 의해 배치, 이미지나 왼쪽과 오른쪽 버튼의 displat 속성을 변경할 수 있습니다. 왼쪽 및 오른쪽 buttoms의 게재 위치를 변경할 수 있도록하는 것은 바로 내의 회전 목마 클래스에 나를 위해 실제 이유였다.
이 MooCarousel 클래스는 ID가이 버튼 밖으로 받아들이고 있기 때문에, 당신은 실제로 당신이 괜찮다면, 페이지의 아무 곳이나이 버튼을 배치할 수있는 ... 그런 요소 계층 구조에 있어야 할 필요는 없습니다, 나의 예제와 같이.

VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실);

CSS
.. carousel_container_l, carousel_container_r {여백 : 50 픽셀 0 0 0; 위치 : 상대적; 폭 : 23px; 높이 : 20px; 플로트 : 왼쪽; 커서 : 포인터;}

. carousel_container_r {배경 위치 : 0-38px;}

. carousel_container_l {배경 위치 : 0-58px;}

3. 슬라이드 단계 Customising

난 내 CUSTOMISING 슬라이드 단계를 무슨 말씀이세요?
대부분 Carousels이 보이는 창으로 가득 밀어. 네 가지 항목을 (위의 예제에서와 같은) 가지고 그렇게 말하고, 모두 네 개의 항목을 밀어 것입니다. 이 회전 목마 구성 요소와 함께, 당신은 슬라이드의 숫자와 선택 단계의 크기를 전달합니다.

VAR carousel1 = 새로운 MooCarousel ( 'carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss 사실);
c_ns 슬라이드 = 수, c_sss = 슬라이드 스텝 크기

또한, 내 example1에 나는 어디 로직을 기반으로 슬라이드 스텝 크기를 calcuted있다, 나는 품목의 수, 각 항목에 너비와 CSS의 각 항목 이후에 제공했다고 여백을 알아요.

카로틴 1 / * * /

VAR c1_w = 92; / / 카로틴 항목 폭

VAR c1_n = 10; 비교의 카로틴 항목의 / / 총 개수

VAR c1_pp 비교의 카로틴의 제품 perpage의 = 4 / / 번호

VAR c1_marginFactor = 51;

VAR c1_sss = c1_w * c1_pp; / / SSS = 슬라이드 스텝 크기

VAR c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5) / / NS의 = 숫자 슬라이드

c1_sss + = c1_marginFactor; 마진에 대한 / / SSS = 슬라이드 스텝 크기, 51

요구 사항 : Mootools 1.2

데모보기 | 페이징 버전 1.0으로 다운로드 Mootools 회전 목마를 (1991 회 다운로드)

(이것은 MooTools 라이브러리의 전원을 사용하기 때문에 물론 크로스 브라우저,) MooRating는 쉽고, 가볍고 뛰어난 Mootools는 평가 솔루션을 바탕으로. 그것은, 등급 이미지 (필자는 다운로드와 별, 바, 하트를 제공하지만, 자신의 다양성을 만들어 단지에 놓을 수) 여러분의 선택으로 될 수 단순히 때문에 "등급"되나되지 않습니다.

어떻게 생겼 않습니다

	서로 다른 이미지 Mootools 평점 데모보기
	백분율 값으로 Mootools 평점 데모보기
	분수 값과 Mootools 평점 데모보기

다운로드 Mootols 등급 평가 스크립트 (718 회 다운로드)

평가 데이터 : 정수, 진수 또는 비율
현재 스크립트가 소수의 전체 값 (1,2,3,4,5), (1.24, 3.45 등)이나 비율의 평가 데이터 (12 %, 55 %의 등)를 표시하도록 설계되었습니다. 언급한 형식의 데이터를 표시하는 선택은 자바 스크립트 내의 일부 플래그 값 (moorating.js)를 변경하여 간단하게 설정할 수 있습니다
기본적으로 선택한 포맷으로 값을 표시하기 위해, 놀 수있는 두 전자 두 플래그가 없습니다 ...

VAR inpercent = false를, 당신은 백분율 값이 표시되는 것을 요구하는 경우 / / 사실이 플래그를 설정
VAR isFractional가 1.24, 1.25, 4.56보다는 1,2 등 분수 값을 ... 5 원한다면 = false를 / / 사실로 설정

그리고 나는이 필요한 어떤 사연이있을 것 없다. 더욱이. 스크립트는 매우 간단합니다. 당신이 약간 javascripting를 알고있다면, 당신은 표시 값의 종류를 얻기 위해 스크립트를 수정할 수 있습니다. 표시할 수있는 세 소수점 환경을 원한다면 예를 들어 ... 그냥 아래에 스크립트를 조정할 ...

/ / 2 변경됩니다 ~ 3; | (isFractional) {. moostartval [전] innerHTML = formatNumber (X, 3)이 경우 (= 0 X <| X = 5>)} 경우
또 {moostartval [전] innerHTML = Math.round (x)를.;

평가 값 업데이트 :
난 항상 그것이 바로 사용자가 요금을 무언가로 등급을 업데이 트하려는 뜻이 아니라 내 경험에서 알기 때문에, 추천 값을 업데이 트하기 위해 모든 AJAX 스크립트를 작성하는 귀찮게 havent. 당신은 정격 값으로 당신이 원하는 건 뭐든지 할 자유, 그것이 AJAX를 사용하여 업데이 트하거나 제출하거나 숨겨진 양식 필드 값을 설정하여 전체 양식 등을 함께 제출되어야

함수 updateRating (ID, 등급) {
/ / 경고 (ID + ","+ 등급);
/ /이 등급대로 그대로 해
}

"updateRating"라는 자바 스크립트 함수가있다. 이 기능에 관해서 식별, 평가 사업부의 ID를 전달하고있는 등급 업데이트 및 평가의 가치 [updateRating (ID, 등급)].되었습니다 (페이지에서 한 등급 더 있는지있다면) 내가 앞에서 언급한대로,이 값을 원하는대로 선택할 수 있습니다.

평점 이미지 : 별, 하트, 바 또는하시기 바랍니다 아무것도
위의 유형 (별, 하트 등) 중 어느 등급을 변경하는 것은 매우 간단합니다. 당신은 이미지의 이름을 변경하면 CSS 파일에 필요한 변경을,, 그거 그냥 제공되는 것과 유사한 이미지를 만들어 기억 인치 떨어뜨 아래를 참조하십시오.

. moostar {여백 : 0px; 패딩 : 0px; 오버플로우 : 숨겨진; 폭 : 84px; 높이 : 20px; 플로트 : 왼쪽; 배경 : URL ( 'stars.gif') 반복-X;}
. moostar 스팬 {플로트 : 왼쪽, 여백 : 0px; 패딩 : 0px; 디스플레이 : 블록; 폭 : 84px; 높이 : 20px; 텍스트 장식 : 없음; 텍스트 들여쓰기 :-9000px; Z-인덱스 : 20;}
.. moostar curr {배경 : URL ( 'stars.gif') 25px를 떠난;}

대부분의 등급 위젯은 각 스타의 이벤트 마우스로 스타와 하프 스타 이미지를 사용합니다. 음메 평가는 매우 낮은 오버헤드와 필요한 시각 효과를 달성하기위한 배경 이미지로 간단한 스프 라이트 이미지를 사용합니다.

요구 사항 : Mootools 1.2
다운로드 Mootols 등급 평가 스크립트 (718 회 다운로드)

파이어 폭스에서는 ... 가끔은 커서가 화면에 깜박이 시작하는 것으로 파악했을 수도 있습니다. 당신이 페이지에 어떤 요소를 클릭하면 그것은 브라우저 창에서이 점멸 커서 실제로는 '캐럿 브라우징'라는 파이어 폭스의 접근성 기능 등 부문이나 이미지가 일어날 수도 있습니다. 이 기능은 수 / (우리가 일반적으로 우리가 마우스를 이용하여 수행하는 경향이있는) 키보드 페이지에서 텍스트를 선택하는 사용자 수 있습니다.

글쎄! 당신 donot이 기능 ... (당신이 그것을 ON하려는 경우) 허위와 그 반대로 전환할 수있는 간단한 프레스 "F7"을 원한다면. 주소 표시줄에 (필터 상자에서 "캐럿"의 형식)과 단순히 더블 'false로 "진실"에서 옵션 "accessibility.browsewithcaret"을 (캐럿이 ON 브라우징 설정)를 변경합니다 : "config를 대해"당신은 또한 입력할 수 있습니다 "(캐럿이 꺼져 탐색하다)

저는 mootools를 사용하여 이중 고정된 슬라이더 (최소 및 최대 두 단자와 슬라이더)를 찾고 있었다. 비록, 내가 mootools 포럼에 몇 잘한 더블 고정된 슬라이더를 찾았지, 문제는 이러한 모든 슬라이더의 움푹 들어간 곳은 선택한 범위 마커를 가지고했습니다. 드디어! 난 내 자신을 작성하기로 결정했습니다. 글쎄! 나는 원래 코드를 사용하여 범위가 아래 내 예제와 같이 시각적으로 선정 표시된 슬라이더 배경을 가지고 그것을 변경 했어요. 파란색 영역은 선택한 가치의 범위를 나타냅니다.

버전 2.2 데모보기 | 다운로드 Mootools 더블 슬라이더 버전에게 2.2 고정된 (11,753 회 다운로드)

넌 아주 쉽게 필요한 slider.css을 수정하여 모양을 변경하고 범위 표시기 (위의 예제에서는 파란색), 슬라이더 노브, 슬라이더 트랙의 느낄 수 있습니다.

당신이 그것 유용한 발견하면 나에게 댓글을 떨어뜨리지 마십시오.

우리가 테이블 셀 내부에 일부 내용을 정렬, 우리의 페이지 레이아웃을 만드는 CSS로 처리해야만하기 전에 그냥 애들 장난 같았다. 간단히 "정렬"또는 원하는 정렬, 케이크 조각을 가지고있는 테이블의 "valign"속성을 설정합니다!
우리 요소 속성을 "수직 정렬"가 불구의 CSS 레이아웃을 통해, 그것은 "정렬"또는 "valign"등록 한 간단하게 될 것 같지 않습니다. 더 specifiic 될 수있는 "수직 정렬"크로스 브라우저 CSS의 조각을 작성하고 특히, 귀하의 문제를 해결할 것 같습니다하지 마십시오.

HTML 테이블의 사용없이, 객체 중심의 문제는, 그것 이미지 또는 함유 부문에서 일부 텍스트, 아마도 언젠가는 모든 UI / CSS 개발자 악몽이었습니다합니다. 이 문제는 더 이상 중심되는 개체가 자연 속에서 역동 경우 그 높이가 변수되면, IE를 정렬에 대해 걱정을 extrapolates (알 수없는 높이).

우리가 감당해내야만 브라우저의 범위에 걸쳐 효과적이라 알려진 바로 앞으로 해결책이 없다지만, 난 않습니다 도착하려고했는지 솔루션 (IE6, IE 7 전에 그것을 시도했다고 몇몇 브라우저에서 작동하는 것 , FF).

해결 방법 :
모질라, 오페라와 사파리와 같은 브라우저에서 이상한 속성이 단순히 "테이블 셀"(디스플레이 : 테이블 셀)에 포함된 부문의 '표시'속성을 설정하여, 그 감각에 회부 수있는 '수직이 정렬 "행동 .

문제는 아직, 아직 그들이, 그들은 단지 그것을 무시 마찬가지로 "테이블 - 셀"속성과 무지로 무엇으로 이해하는 사람이 아닌 것 같은데, 브라우저의 IE 가족과 함께 남아있다. 이런 일을하려면 HTML로 간단한 광고를 몇 가지 더 DOM 요소지만, 아래에 주어진 솔루션입니다.

CSS와 HTML은 다음과 같습니다
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML : -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> 전망 <br/> : 3,456 </ 사업부를>
</ 사업부>
</ 사업부>

결과는 다음과 같습니다 : -

여기 데모를 볼 | 다운로드 소스 파일 (452 회 다운로드)

TOP은 CSS를 정렬
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML : -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> 전망 <br/> : 1,234 </ 사업부를>
</ 사업부>
</ 사업부>

결과는 다음과 같습니다 : -

아래는 CSS를 정렬
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML : -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> 전망 <br/> : 1,234 </ 사업부를>
</ 사업부>
</ 사업부>

결과는 다음과 같습니다 : -

여기 데모를 볼 | 현재 다운로드

내가이 정렬 문제에 대한 합리적인 해결책을 찾기 위해 노력 이후, 나이처럼 보인다. 그러나 이제는이 솔루션과 함께, 나는 작은 평화에서 느낍니다.

그 언젠가는 희망이

• CSS에서 수직 정렬 속성은 돌려 많이 이길 필요없이, 그것이 테이블 셀 안쪽처럼 작동합니다
• 적어도 마진 탑 설정 : 자동과 마진 - 하단 : 자동, 여백에서 왼쪽 및 오른쪽 여백 설정 자동으로와 같은 결과로 제공합니다
• 브라우저 전쟁 언젠가는 이상이 될 것입니다.
• 가이 모두를위한 하나의 브라우저.

여기에 위의 솔루션의 CSS와 HTML을 다운로드 (452 회 다운로드) .. understandability 들어, CSS는 최적화되지 않습니다

PS : 그리고 참, 그 내가 클릭한 일부 사진의 작은 이미지입니다 ...