2014-06-18 5 views
-1

여기 페이지가 있습니다 - http://click2recycle.ca/. "전자 제품의 대량 구매 및 재활용"이라는 헤드 라인 아래의 섹션을 보면 트럭 사진이 있습니다. 좌우의 이미지의 중간 점에서 수직으로 가운데에 위치합니다.이미지를 세로로 가운데에 배치하려면 어떻게합니까?

여기 페이지가 있습니다 - http://vmmed.com/service/?page_id=7. "OUR ACCREDITATIONS AND AFICILIATIONS"제목 아래 부분을 보면 CAR (중간 로고)라는 조직의 로고가 보입니다. 최선의 노력에도 불구하고 왼쪽과 오른쪽 이미지의 중간 지점에 수직으로 중앙에 있지 않습니다.

크롬의 검사 요소 기능을 사용하여 CSS를 비교했지만 차이점을 찾을 수 없습니다.

의견이 있으십니까?

+0

Png의 투명 높이가 높습니다. 첫 번째 예를 믿습니다. – kthornbloom

답변

2

많은 사람들이 수정에 대해 언급하고 있지만, 원래 질문은 왜 두 가지가 다른지 묻습니다. 나는 두 사람이 다르게 행동하는 이유도 (크롬 사용) 똑같은 것으로 관심을 보였습니다.

첫 번째로 차이점은 무엇입니까? (Chrome 사용) - 빨간색 테두리를 추가하여 상단에 정렬되지 않았 음을 시각적으로 보여줍니다. 파이어 폭스에서 두 페이지를 볼 때

http://vmmed.com/service/?page_id=7

enter image description here

지금

enter image description here

http://click2recycle.ca/는, 당신은 참조하십시오

enter image description here

다시

enter image description here

,이 두 파이어 폭스에서 있었다 그들이 모두 최고 정렬되어 있음을 보여준다. 차이점은 무엇입니까?

-webkit-box-align: center; 
-webkit-box-pack: center; 

(정보 여기 상자가 맞 춥니에 대해 : https://developer.mozilla.org/en-US/docs/Web/CSS/box-align을) 그건

enter image description here

을 그리고 한 페이지 (http://click2recycle.ca/)가 아닌 다른 한편상의 inline style을 발견 할 때

은 그입니다 왜 두 사람이 다른가! 왜 Chrome과 관련이 있습니까 (공급 업체 프리픽스 때문에).

희망이 도움이됩니다.

0

몇 가지 방법이 있습니다. 가장 간단한 방법은 포함하는 div에 padding-top을 추가하고 특정 화면 해상도에서 미디어 쿼리 (반응이 좋았던 것으로 나타남)를 제거하는 것입니다. 다른 방법

, 나는 성공적으로 몇 번 사용했던이 example에서 봐 가지고,하지만 CSS를 추가 빈 요소와 모든 브라우저에서 바로 모든 것을 얻을하고 display:inline

0

를 사용하는 종류의 까다로운

는 XPath와 소자
top:30px; 

: 클래스

//*[@id="x-content-band-10"]/div[2] 

(DIV "X-콜럼 n vc 1/3 ")

0

이렇게 수정되었으므로 응답 성을 유지해야합니다. CSS에서 이것을 버리십시오.

.center-block { 
margin-top: 2.25em; 
관련 문제