div 안에 이미지를 세로로 정렬하는 방법

이미지를 포함하는 이미지 안에 어떻게 정렬 할 수 div있습니까?

예

내 예제에서는 수직 가운데 놓아야 <img>에서을 <div>로 class ="frame"

<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>

유일한 (최고의 크로스 브라우저) 방법 내가 알기로는 사용하는 것입니다 inline-block와 도우미를 height: 100%하고 vertical-align: middle두 요소.

따라서 해결책이 있습니다 : 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 표현식을 사용하지 않으려는 경우 의사 요소를 사용하고 편리한 Expression을 사용하여 Internet Explorer에 추가 할 수 있습니다. 성능 문제가 없습니다.

와 솔루션 :before및 expression()Internet Explorer 용 : 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>

작동 방식 :

1. inline-block서로 가까이에 두 개의 요소 가 있으면 서로의 측면에 맞출 수 있으므로 vertical-align: middle다음과 같이 얻을 수 있습니다.

   

2. 는 (고정 된 높이를 갖는 블록이있을 때 px, em또는 다른 절대 부)는 내부에 블록의 높이를 설정할 수있다 %.

3. 따라서 고정 높이의 블록에 하나 inline-block를 추가하면 height: 100%다른 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,output

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

이렇게하면 이미지를 세로로 가운데에 맞출 수 있습니다 ( demo ).

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의 배경으로 설정했습니다. .frame

http://jsfiddle.net/URVKa/2/

이것은 Internet Explorer 8, Firefox 6 및 Chrome 13에서 제대로 작동합니다.

확인한 결과이 솔루션은 높이가 25 픽셀보다 큰 이미지를 축소하는 데 작동하지 않습니다. 라는 속성이 있습니다background-size요소의 크기를 설정 있지만 Internet Explorer 7 요구 사항과 충돌하는 CSS 3입니다.

이 솔루션을 사용하려면 브라우저 우선 순위를 다시 설정하고 사용 가능한 최상의 브라우저를 설계하거나 이미지 크기를 조정할 수있는 서버 측 코드를 얻는 것이 좋습니다.

당신이 가지고 있다고 상상해보십시오

<div class="wrap">
    <img src="#">
</div>

그리고 CSS :

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

당신은 이것을 할 수 있습니다 :

데모

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";
})

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이 인라인으로 표시되므로 블록 요소로 감싸 야합니다.

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/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;
}

이것은 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 {}클래스가있는 div로 래핑 된 이미지 만 .frame타겟팅되도록 사용했습니다.

순수한 CSS http://jsfiddle.net/sandeep/4RPFa/72/ 로이 솔루션을 사용해보십시오

아마도 HTML의 주요 문제 일 수 있습니다. HTML에서 c 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태그가 2 픽셀 공간에 3 개 픽셀을 떠나입니다 top. 이제는 감소 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다른 브라우저에서 다른 : 파이어 폭스와 크롬에서 입력 높이 차이를

나는 인터넷 익스플로러에 대해 잘 모르겠지만, 당신이있는 경우 파이어 폭스와 크롬에서, imgA의 div용기, 다음 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에서 .

여기에 사용 된 팁은 다음과 같습니다.

• 테이블로 표시된 절대 위치 지정 컨테이너
• 표 셀로 표시되는 가운데 내용에 맞게 세로로 정렬

.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;
}

Chrome에서 잘 작동합니다. 다른 브라우저에서 이것을 사용해보십시오.

다음과 같은 텍스트 외에 이미지를 컨테이너 내부에 배치 (로고 일 수 있음) :

기본적으로 이미지를 감 쌉니다.

.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/

이제는 더 이상 오페라 중심에 있지 않습니다…

나는 같은 문제가 있었다. 이것은 나를 위해 작동합니다 :

<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> 

가운데 정렬을 위해 패딩을 사용하여 놀고 있습니다. 최상위 레벨 외부 컨테이너 크기를 정의해야하지만 내부 컨테이너의 크기가 조정되어야하며 패딩을 다른 백분율 값으로 설정할 수 있습니다.

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;
}

이것을 사용하십시오 :

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

그리고 당신은 다를 수 있습니다 font-size.

텍스트 / 제목 뒤에 있고 둘 다 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>