CSS img align : DIV에서 img 가운데 오른쪽 정렬을 설정하는 방법

DIV에서 img를 중간 오른쪽 정렬하는 간단한 방법을 찾고 있습니다. 즉, 가운데 정렬과 오른쪽 정렬이 가능합니다. :CSS img align : DIV에서 img 가운데 오른쪽 정렬을 설정하는 방법

나는 수직 정렬을 사용하여 시도

enter image description here

: 중간 및 플로트 : BTW 바로 IMG 스타일에 있지만 함께 작동하지 않을 것 같다 ..

<div style='height: 300px; width: 300px'> 
    <img src= 'http://www.w3schools.com/tags/smiley.gif' style='vertical-align: middle; float: right;'/> 
</div>

출처

2012-01-24 Simon

<DIV style='height: 300px; width: 300px;border:1px solid #ff0000;display:table-cell;vertical-align: middle'> 
<img src= 'http://www.w3schools.com/tags/smiley.gif' style='float:right;'/> 
</DIV>

, 당신이 사용하는 "스타일 = "이미지 태그에. 이것은 유효하지 않습니다.

출처

2012-01-24 19:28:40

이렇게하는 방법에는 여러 가지가 있습니다. 이미지와 컨테이너의 높이를 알고 있으면 쉽게 처리 할 수 있습니다. 그렇지 않으면 까다 롭습니다.

방법 1 : 라인 높이, 텍스트 정렬 및 수직 정렬

#div1 { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
    line-height: 300px; 
 
    text-align: right; 
 
} 
 
#div1 img { 
 
    vertical-align: middle; 
 
}

<div id="div1"> 
 
    <img src="http://dummyimage.com/100x50/fc0/000000.png">&#8203; 
 
</div>

방법 2 : 절대적/상대적 위치, 화상 높이에 맞춰 솔루션을 선택 알려진

,363,210

방법 3 :이 경우 절대적/상대적 위치, 이미지 컨테이너 높이

#div1 { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
} 
 
#div1 img { 
 
    float: right; 
 
    position: relative; 
 
    top: 125px; /* (div_height-image_height)/2 */ 
 
}

<div id="div1"> 
 
    <img src="http://dummyimage.com/100x50/fc0/000000.png"> 
 
</div>

jsFiddle

출처

2012-01-24 19:56:19

display: table-cell 트릭 잘 작동 공지 j div에 떠 다니는 이미지가 있어야합니다. 그러나 이미지를 붐비는 다른 요소가있는 경우 (예 : <p>) 브라우저에서 크기를 조정할 때 이미지를 세로로 밀어 넣는 경향이 있습니다.

http://www.brunildo.org/test/img_center.html에는 크로스 브라우저 지원 및 이전 브라우저 버전 해킹에 대한 유용한 정보가있어 IE의 깨진 상자 모델에서 올바르게 표시되는 이미지를 얻을 수 있습니다.

출처

2012-01-24 20:17:25

CSS img align : DIV에서 img 가운데 오른쪽 정렬을 설정하는 방법

답변

관련 문제