질문자 :Arnaud Le Blanc
div 내부에 이미지를 어떻게 정렬할 수 있습니까?
예시
class ="frame "을 사용하여 <div> <img> 를 수직으로 가운데에 배치해야 합니다.
<div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div>
.frame 의 높이는 고정되어 있고 이미지의 높이는 알 수 없습니다. 유일한 해결책이라면 .frame 에 새 요소를 추가할 수 있습니다. Internet Explorer 7 이상, WebKit, Gecko에서 이 작업을 수행하려고 합니다.
여기 에서 jsfiddle을 참조하십시오.
.frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }
<div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>
내가 아는 유일한(그리고 최고의 크로스 브라우저) 방법은 두 요소 모두에서 height: 100% 및 vertical-align: middle inline-block
그래서 해결책이 있습니다: http://jsfiddle.net/kizu/4RPFa/4570/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you put the helper span closely near the img */ text-align: center; margin: 1em 0; } .helper { display: inline-block; height: 100%; vertical-align: middle; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }
<div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px /> </div> <div class="frame"> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=17px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=15px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=13px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=11px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=9px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=7px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=5px /> </div> <div class="frame"> <span class="helper"></span> <img src="http://jsfiddle.net/img/logo.png" height=3px /> </div>
또는 최신 브라우저에서 추가 요소를 원하지 않고 Internet Explorer 표현식을 사용하는 데 신경 쓰지 않는다면 의사 요소를 사용하고 요소당 한 번만 실행되는 편리한 표현식을 사용하여 Internet Explorer에 추가할 수 있습니다. , 따라서 성능 문제가 없습니다.
Internet Explorer용 :before 및 expression() 이 있는 솔루션 : http://jsfiddle.net/kizu/4RPFa/4571/
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; text-align: center; margin: 1em 0; } .frame:before, .frame_before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; } /* Move this to conditional comments */ .frame { list-style:none; behavior: expression( function(t){ t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>'); t.runtimeStyle.behavior = 'none'; }(this) ); }
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div> <div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
작동 방식:
두 개의 inline-block 요소가 서로 가까이 있으면 서로를 옆으로 정렬할 수 있으므로 vertical-align: middle 을 사용하면 다음과 같은 결과를 얻을 수 있습니다.
고정 높이( px , em 또는 다른 절대 단위)가 있는 블록이 있는 경우 내부 블록의 높이를 % 설정할 수 있습니다.
-
height: 100% inline-block 을 하나 추가하면 높이가 고정된 블록에 다른 inline-block 요소( <img/> )를 수직으로 정렬합니다.
다음과 같이 유용할 수 있습니다.
div { position: relative; width: 200px; height: 200px; } img { position: absolute; top: 0; bottom: 0; margin: auto; } .image { min-height: 50px }
matejkramny의 솔루션은 좋은 시작이지만 대형 이미지의 비율이 잘못되었습니다.
내 포크는 다음과 같습니다.
데모: https://jsbin.com/lidebapomi/edit?html,css,출력
HTML:
<div class="frame"> <img src="foo"/> </div>
CSS:
.frame { height: 160px; /* Can be anything */ width: 160px; /* Can be anything */ position: relative; } img { max-height: 100%; max-width: 100%; width: auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
3줄 솔루션:
position: relative; top: 50%; transform: translateY(-50%);
이것은 무엇이든 적용됩니다.
여기에서 .
순수한 CSS 솔루션:
.frame { margin: 1em 0; height: 35px; width: 160px; border: 1px solid red; position: relative; } img { max-height: 25px; max-width: 160px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: #3A6F9A; }
<div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>
핵심 내용
// position: relative; - in .frame holds the absolute element within the frame // top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component // margin: auto; - centers the image horizontally & vertically
보다 현대적인 솔루션의 경우 레거시 브라우저를 지원할 필요가 없는 경우 다음을 수행할 수 있습니다.
.frame { display: flex; /** Uncomment 'justify-content' below to center horizontally. ✪ Read below for a better way to center vertically and horizontally. **/ /* justify-content: center; */ align-items: center; } img { height: auto; /** ✪ To center this image both vertically and horizontally, in the .frame rule above comment the 'justify-content' and 'align-items' declarations, then uncomment 'margin: auto;' below. **/ /* margin: auto; */ } /* Styling stuff not needed for demo */ .frame { max-width: 900px; height: 200px; margin: auto; background: #222; } p { max-width: 900px; margin: 20px auto 0; } img { width: 150px; }
<div class="frame"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png"> </div>
여기 펜이 있습니다: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
이렇게 하면 이미지를 세로로 가운데에 맞출 수 있습니다( 데모 ).
div{ height: 150px; // Internet Explorer 7 fix line-height: 150px; } img{ vertical-align: middle; margin-bottom: 0.25em; }
또한 Flexbox를 사용하여 올바른 결과를 얻을 수 있습니다.
.parent { align-items: center; /* For vertical align */ background: red; display: flex; height: 250px; /* justify-content: center; <- for horizontal align */ width: 250px; }
<div class="parent"> <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /> </div>
flexbox에는 아주 쉬운 솔루션이 있습니다!
.frame { display: flex; align-items: center; }
PI의 CSS를 다음과 같이 display: table-cell; vertical-align: middle;
아래 코드를 시도할 수 있습니다.
.frame{ display: flex; justify-content: center; align-items: center; width: 100%; }
<div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div>
당신이 가지고 있다고 상상해보십시오.
<div class="wrap"> <img src="#"> </div>
그리고 CSS:
.wrap { display: flex; } .wrap img { object-fit: contain; }
CSS 그리드
이미지 컨테이너 내에서 단일 이미지를 수직으로 정렬하려면 다음을 사용할 수 있습니다.
.img-container { display: grid; } img { align-self: center; }
.img-container { display: grid; grid-auto-flow: column; background: #BADA55; width: 1200px; height: 500px; } img.vertical-align { align-self: center; }
<div class="img-container"> <img src="https://picsum.photos/300/300" /> <img class="vertical-align" src="https://picsum.photos/300/300" /> <img src="https://picsum.photos/300/300" /> </div>
이미지 컨테이너 내에서 여러 이미지를 정렬하려면 다음을 사용할 수 있습니다.
.img-container { display: grid; align-items: center; }
.img-container { display: grid; grid-auto-flow: column; align-items: center; background: #BADA55; width: 1200px; height: 500px; }
<div class="img-container"> <img src="https://picsum.photos/300/300" /> <img src="https://picsum.photos/300/300" /> <img src="https://picsum.photos/300/300" /> </div>
grid-auto-flow: column 을 사용했다는 점에 유의하십시오. 그렇지 않으면 요소가 명시적 그리드 항목을 지정하여 행으로 래핑되기 때문입니다. 질문 코드에서 항목도 가로로 가운데에 표시됩니다. 이 경우 align-items: center place-items: center 사용하십시오.
배경 이미지 솔루션
.frame 클래스로 div의 배경으로 설정했습니다.
http://jsfiddle.net/URVKa/2/
이것은 적어도 Internet Explorer 8, Firefox 6 및 Chrome 13에서 제대로 작동합니다.
확인했는데 이 솔루션은 높이가 25픽셀보다 큰 이미지를 축소하는 데 작동하지 않습니다. background-size 라는 속성이 있지만 Internet Explorer 7 요구 사항과 충돌하는 것은 CSS 3입니다.
이 솔루션을 사용하려면 브라우저 우선 순위를 다시 실행하고 사용 가능한 최상의 브라우저를 위해 디자인하거나 서버 측 코드에서 이미지 크기를 조정하는 것이 좋습니다.
http://jsfiddle.net/MBs64/
.frame { height: 35px; /* Equals maximum image height */ width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; display: table-cell; vertical-align: middle; } img { background: #3A6F9A; display: block; max-height: 35px; max-width: 160px; }
주요 속성은 display: table-cell; .frame . Div.frame 함께 Div.frame이 인라인으로 표시되므로 블록 요소로 래핑해야 합니다.
이것은 Firefox, Opera, Chrome, Safari 및 Internet Explorer 8(이상)에서 작동합니다.
업데이트
Internet Explorer 7의 경우 CSS 표현식을 추가해야 합니다.
*:first-child+html img { position: relative; top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px"); }
당신은 이것을 할 수 있습니다:
데모
http://jsfiddle.net/DZ8vW/1
CSS
.frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; position: relative; /* Changes here... */ } img { background: #3A6F9A; max-height: 25px; max-width: 160px; top: 50%; /* Here.. */ left: 50%; /* Here... */ position: absolute; /* And here */ }
자바스크립트
$("img").each(function(){ this.style.marginTop = $(this).height() / -2 + "px"; })
이것은 codepen의 이 데모에서 볼 수 있듯이 최신 브라우저(편집 당시 2016)에서 작동합니다.
.frame { height: 25px; line-height: 25px; width: 160px; border: 1px solid #83A7D3; } .frame img { background: #3A6F9A; display:inline-block; vertical-align: middle; }
이미지에 클래스를 제공하거나 상속을 사용하여 중심에 필요한 이미지를 대상으로 지정하는 것이 매우 중요합니다. 이 예에서 우리는 사용 .frame img {} 의 클래스 사업부 래핑 만 이미지 있도록 .frame 대상이 될 것입니다.
내 솔루션: http://jsfiddle.net/XNAj6/2/
<div class="container"> <div class="frame"> <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" /> </div> </div> .container { display: table; float: left; border: solid black 1px; margin: 2px; padding: 0; background-color: black; width: 150px; height: 150px; } .frame { display: table-cell; text-align: center; vertical-align: middle; border-width: 0; } .img { max-width: 150px; max-height: 150px; vertical-align: middle; }
순수 CSS http://jsfiddle.net/sandeep/4RPFa/72/로 이 솔루션을 사용해 보십시오.
HTML의 주요 문제일 수 있습니다. HTML에서 lass 및 image height 를 정의할 때 따옴표를 사용하지 않습니다.
CSS:
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; position: relative; margin: 1em 0; top: 50%; text-align: center; line-height: 24px; margin-bottom: 20px; } img { background: #3A6F9A; vertical-align: middle; line-height: 0; margin: 0 auto; max-height: 25px; }
img 태그로 작업할 때 top 에서 3픽셀에서 2픽셀의 공간이 남습니다. 이제 line-height 줄이고 작동합니다.
CSS:
.frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; margin: 1em 0; text-align: center; line-height: 22px; *:first-child+html line-height:24px; /* For Internet Explorer 7 */ } img { background: #3A6F9A; vertical-align: middle; line-height: 0; max-height: 25px; max-width: 160px; } @media screen and (-webkit-min-device-pixel-ratio:0) { .frame { line-height:20px; /* WebKit browsers */ }
line-height 속성은 브라우저마다 다르게 렌더링됩니다. line-height 속성 브라우저를 정의해야 합니다.
이 예를 확인하십시오: http://jsfiddle.net/sandeep/4be8t/11/
다른 브라우저에서 다른 line-height 에 대한 이 예를 확인하십시오 . Firefox 및 Chrome의 입력 높이 차이
Internet Explorer에 대해서는 잘 모르겠지만 Firefox 및 Chrome div img 가 있는 경우 다음 CSS 콘텐츠가 작동해야 합니다. 적어도 나를 위해 그것은 잘 작동합니다.
div.img-container { display: table-cell; vertical-align: middle; height: 450px; width: 490px; } div.img-container img { max-height: 450px; max-width: 490px; }
테이블 및 테이블 셀을 사용한 솔루션
때로는 테이블/테이블 셀로 표시하여 해결해야 합니다. 예를 들어, 빠른 제목 화면. W3에서도 추천하는 방법입니다. W3C.org에서 Centering block 또는 image 라는 링크를 확인하는 것이 좋습니다.
여기에 사용된 팁은 다음과 같습니다.
- 테이블로 표시되는 절대 위치 지정 컨테이너
- 테이블 셀로 표시되는 가운데 콘텐츠에 수직으로 정렬됨
.container { position: absolute; display: table; width: 100%; height: 100%; } .content { display: table-cell; vertical-align: middle; }
<div class="container"> <div class="content"> <h1 style="text-align:center">Peace in the world</h1> </div> </div>
개인적으로 나는 실제로 이 목적으로 도우미를 사용하는 것에 대해 동의하지 않습니다.
나를 위해 일하는 쉬운 방법 :
img { vertical-align: middle; display: inline-block; position: relative; }
그것은 구글 크롬에 아주 잘 작동합니다. 다른 브라우저에서 이것을 시도하십시오.
다음과 같은 텍스트 외에 컨테이너(로고일 수 있음) 내부의 이미지를 중앙에 배치하려면:
기본적으로 이미지를 래핑합니다.
.outer-frame { border: 1px solid red; min-height: 200px; text-align: center; /* Only to align horizontally */ } .wrapper{ line-height: 200px; border: 2px dashed blue; border-radius: 20px; margin: 50px } img { /* height: auto; */ vertical-align: middle; /* Only to align vertically */ }
<div class="outer-frame"> <div class="wrapper"> some text <img src="http://via.placeholder.com/150x150"> </div> </div>
픽셀 크기의 여백으로 살 수 있다면 font-size: 1px; .frame . 그러나 이제 .frame 1em = 1px에서 여백을 픽셀 단위로 설정해야 함을 기억하십시오.
http://jsfiddle.net/feeela/4RPFa/96/
이제 더 이상 Opera의 중심에 있지 않습니다…
나는 같은 문제가 있었다. 이것은 나를 위해 작동합니다.
<style type="text/css"> div.parent { position: relative; } img.child { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; } </style> <div class="parent"> <img class="child"> </div>
다음을 사용할 수 있습니다.
.loaderimage { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; /* 50% of the height */ margin-left: -30px; }
table 및 table-cell 방법을 사용하여 작업을 수행합니다. 특히 일부 오래된 브라우저도 대상으로 하기 때문에 실행하고 결과를 확인할 수 있는 스니펫을 생성합니다.
.wrapper { position: relative; display: table; width: 300px; height: 200px; } .inside { vertical-align: middle; display: table-cell; }
<div class="wrapper"> <div class="inside"> <p>Centre me please!!!</p> </div> <div class="inside"> <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" /> </div> </div>
텍스트/제목 뒤에 있고 둘 다 div 안에 있는 이미지를 정렬하고 싶습니까?
JSfiddle 또는 Run Code Snippet에서 참조하십시오.
모든 요소(div, img, title 등)에 ID 또는 클래스가 있어야 합니다.
저에게 이 솔루션은 모든 브라우저에서 작동합니다(모바일 장치의 경우 @media를 사용하여 코드를 조정해야 함).
h2.h2red { color: red; font-size: 14px; } .mydivclass { margin-top: 30px; display: block; } img.mydesiredclass { margin-right: 10px; display: block; float: left; /* If you want to allign the text with an image on the same row */ width: 100px; heght: 100px; margin-top: -40px /* Change this value to adapt to your page */; }
<div class="mydivclass"> <br /> <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png"> <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2> </div>
중앙 정렬을 위해 패딩을 사용하여 놀고 있습니다. 최상위 외부 컨테이너 크기를 정의해야 하지만 내부 컨테이너의 크기가 조정되어야 하며 패딩을 다른 백분율 값으로 설정할 수 있습니다.
jsfiddle
<div class='container'> <img src='image.jpg' /> </div> .container { padding: 20%; background-color: blue; } img { width: 100%; }
가장 좋은 해결책은
.block{ /* Decor */ padding:0 20px; background: #666; border: 2px solid #fff; text-align: center; /* Important */ min-height: 220px; width: 260px; white-space: nowrap; } .block:after{ content: ''; display: inline-block; height: 220px; /* The same as min-height */ width: 1px; overflow: hidden; margin: 0 0 0 -5px; vertical-align: middle; } .block span{ vertical-align: middle; display: inline-block; white-space: normal; }
출처 : http:www.stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div