요소를 배치 할 수 없습니다.

Question

IMG 태그와 다른 Span 태그가 포함 된 스팬 태그가 있습니다. 내측 스팬 태그가 왼쪽에 정렬되고 IMG 태그가 중앙 정렬되도록하고 싶습니다. 그리고 두 태그가 중간에 세로 정렬되도록하고 싶습니다.이 태그를 가져올 수 없습니다.

당신은 이미지에서 볼 수 있듯이

이 두 태그는 다음과 같습니다

이것은 (외부 스팬 태그는 전체 표면을 스트레칭 있다고 보여 방화범 표시되어 있기 때문에 그것은 파란색의) 모습입니다 중심에 있고 컨테이너의 꼭대기에 정렬되어 있기 때문에이 중 하나도 필요하지 않습니다. 나는 내 문제, 색상 관련이 없습니다있는 CSS를 왼쪽

.v-button-wrap { 
    height: 100%; 
    display: block; 
    padding: 6px 15px 0 9px; 
    vertical-align: middle; 
    line-height: normal; 
    text-align: center; 
} 

.v-icon { 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
    line-height: normal; 
    text-align: center; 
} 

.v-button-caption { 
    text-align: left; 
    line-height: normal; 
    vertical-align: middle; 
} 

:

이 태그의 현재 CSS는 다음과 같습니다

이 마크 업입니다 글꼴 - 사양 등. 말할 필요도없이 나는 CSS에 아무 에이스도 없다. 그리고 문제를 다루는 여러 가이드를 살펴 보았지만 div의 전체 내용이 중심 인 예제 만 찾았습니다. 원하는 것은 아닙니다.

좋은 CSS 지식을 가진 사람이 내 코드에서 문제를 확인합니까? 아니면 내 문제를 해결할 다른 솔루션을 ..?

감사합니다.

편집 : 다음은 요청으로 인한 전체 레이아웃의 스크린 샷입니다. 죄송합니다. 일부 항목을 흐리게 처리해야하지만 ... 중요하지 않은 경우도 있습니다. =)

EDIT2 :

.v-button-details-panel-header .v-button-wrap { 
    height: 100%; 
    text-align: inherit; 
    padding: 0px; 
} 

.v-button-details-panel-header .v-button-wrap .v-button-caption { 
    display: table-cell; 
    position: relative; 
    text-align: left; 
} 

.v-button-details-panel-header .v-button-wrap .v-icon { 
    display: table-cell; 
    position: relative; 
    top: 12px; 
    margin-left: auto; 
    margin-right: auto; 
} 

내가 제안 조언 dgvid가 정적 레이아웃에 좋은했을 확신 : 나는 다음과 같은 CSS를 사용하여 내 문제를 해결하기 위해 관리 않았다 . 그러나 패널과 수평으로 뻗어있는 버튼은 팽창과 붕괴에 따라 움직이기 때문에 적절한 해결책은 아닙니다.

Answer 1

img 및 span.v_button_caption의 CSS display 속성을 inline-block으로 설정해야 할 수 있습니다. 원하는 결과를 달성하기 위해 다른 기술에 관해서는 Understanding vertical-align, or "How (Not) To Vertically Center Content"

:

은이 문서를 참조하십시오 당신은 컨테이너 요소의 높이를 알고 당신이 알고있는 경우 요소의 높이가 CSS에서 불행하게도을 중심으로 (그리고 수 당신은 당신이

1. 는 컨테이너 요소의 CSS 속성을 줄 수있는) 당신이 할 것을 표시되지 않습니다,`위치 게시 한 : 상대 '
2. 이 요소 - 투 - 중앙에 CSS 속성을 부여를 position: absolute
3. 중심 요소의 CSS top 속성을 (containerHeight/2) - (centeredEltHeight/2)로 설정합니다.