div에 가변 크기 이미지를 세로 정렬합니까?

편집 : DOCTYPE TRANSITIONAL을 사용했기 때문에 이것을 읽는 사람에게 보내는 메모가 나에게 적합하지 않은 이유가 있습니다. HTML이나 CSS의 변경없이 DOCTYPE STRICT로 전환하면 효과가있었습니다. 적어도 Chrome, FF 및 IE8에서는 마찬가지입니다.div에 가변 크기 이미지를 세로 정렬합니까?

저는 온라인에서 제공되는 많은 솔루션을 시도했지만 그 중 아무 것도 저에게 적합하지 않습니다. div 안에 이미지를 세로 정렬하려고합니다. 이미지는 이미 가로로 정렬되어 있습니다.

이미지의 너비 및 높이 (최대 70px)가 될 수 있으므로 고정 여백 등을 사용할 수 없습니다.

<head> 
    <style type="text/css" media="all"> 
    #list ul { 
     list-style: none; 
     margin: 0px; 
     padding: 0px; 
    } 
    #list li { 
     border: 2px solid #DDD; 
     margin-bottom: 3px; 
     height: 110px; 
    } 
    #image { 
     width: 75px; 
     height: 110px; 
     line-height: 110px; 
     float: left; 
    } 
    #image img { 
     vertical-align: middle; 
     display: block; 
     margin: auto; 
    } 
    #event { 
     margin-left: 75px; 
    } 
    </style> 
</head> 

<body> 
<div id='container'> 
    <div id="list"> 
     <ul> 
      <li> 
       <div id='image'> 
        <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/> 
       </div> 
       <div id='event'> 
        <h1>Text</h1> 
        <h2>More Text</h2> 
       </div> 
      </li> 
      <li> 
       <div id='image'> 
        <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/> 
       </div> 
       <div id='event'> 
        <h1>Text</h1> 
        <h2>More Text</h2> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

출처

2011-08-01 Kevin Cooper

블록 요소에는 vertical-align을 사용할 수 없습니다. 이미지는 대개 인라인 요소이지만 이미지는 display: block으로 명시 적으로 설정되어 있습니다. 이를 제거하고 상위 div의 line-height을 div의 높이로 설정하십시오.

여기 작품 : #image { 폭 :이 아무것도 해결되지 http://jsfiddle.net/YnzR9/1/

#image { 
    width: 75px; 
    height: 100%; 
    float: left; 
    line-height: 110px; 
    text-align: center; 
} 
#image img { 
    vertical-align: middle; 
}

출처

2011-08-01 21:02:20 gilly3

이제 이미지 **는 수평 가운데에 있지 않고 세로로 중심이 맞지 않으며 내 텍스트 줄이 거대합니다 (각 줄의 높이가 110 픽셀이기 때문에). 어쩌면 내가 잘못 이해하고있을거야? –

인라인 요소에서 작동하지 않는 'margin : auto'을 사용하여 가운데에 배치했습니다. 대신 부모 요소에'text-align : center'를 사용하십시오. 여기에서 조정 : http://jsfiddle.net/YnzR9/1/ – gilly3

대단히 감사합니다! –

사업부의 높이와 같은 값으로 사업부의 "행 높이"로 설정 :

은 여기 내 HTML + CSS입니다.

업데이트 : 이미지를 세로로 정렬하고 가운데에 맞 추기를 원하면 다음을 사용하십시오.

#image { 
    width: 75px; 
    height: 110px; 
    float: left; 
    line-height: 110px; 
    text-align:center; 
} 
#image img { 
    vertical-align: middle; 
}

출처

2011-08-01 20:53:12 pdubs

75px를; 높이 : 110px; \t 줄 높이 : 110px; float : left; } –

라인 높이를 넣을 div를 말하지 않았지만, 나는 그것들을 모두 시도했지만 아무 것도 효과가 없었습니다. –

gilly3은'display : block'은 줄 높이를 부정한다고 언급합니다. 이미지를 세로로 정렬하고 중앙에 배치하려는 경우 업데이트 된 게시물을 참조하십시오. – pdubs

div에 가변 크기 이미지를 세로 정렬합니까?

답변

관련 문제