생성 된 콘텐츠를 세로로 가운데에 맞출 수 있습니까?

Question

제가 적용 다음 스타일과 div가 있다고 가정 : 나는 :before 의사 요소를 적용

div { 
    border: 1px solid #000; 
    padding-left: 35px; 
    position: relative; 
} 

div 그것.

div:before { 
    content: url(someImage.png); 
    background-color: #ccc; 
    position: absolute; 
    left: 0; 
    width: 30px; 
    height: 100%; 
} 

div의 높이가 동적 : 해당 가상 요소의 함유량은 이미지이다. 생성 된 컨텐츠의 일부인 이미지를 수직으로 가운데 정렬 할 수있는 방법이 있습니까?

여기는 fiddle with an example입니다.

div의 높이를 모르므로 line-height을 사용할 수 없습니다. 생성 된 내용의 배경 색상이 div 이상으로 확장되므로 여백 또는 패딩을 사용할 수 없습니다. 나는 그 대답이 "아니오"라고 생각하지만 마크 업을 많이 바꾸기 전에 여기서 물어볼 가치가 있다고 생각했다!

Answer 1

일반 인라인 <img> 태그의 CSS 버전에 불과하므로 이론적으로는 가능해야하지만 형식에 따라 크게 달라질 수 있습니다 (가능하게는 생성 요소의 것). 적절하게 다루는 나는 사실을 활용하고있어

div:before { 
    content: ''; 
    background: #ccc url(someImage.png) center center no-repeat; 
    position: absolute; 
    left: 0; 
    width: 30px; 
    height: 100%; 
} 

공지 이미 회색 배경을 가지고 :

은 단순화하기 위해, 나는 그것의 내용에 대해 빈 문자열로, 대신 배경 이미지를 만들 것 생성 된 영역 - 나는 단순히 그 회색 배경 위에 이미지의 중심을 맞 춥니 다.

Updated fiddle