css vertical-align 속성 - div 안에 이미지를 수직으로 정렬하는 방법은 무엇입니까?





15 Answers

이것은 유용 할 수 있습니다 :

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

참조 : http://www.student.oulu.fi/~laurirai/www/css/middle/

글자 높이 안먹는

의문

포함 div 의 이미지를 어떻게 정렬 할 수 있습니까?

나의 예에서는 class ="frame "을 사용하여 <div><img> 를 세로로 배치해야합니다.

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame 의 높이가 고정되어 있고 이미지의 높이를 알 수 없습니다. 그게 유일한 해결책이라면 .frame 에 새로운 요소를 추가 할 수 있습니다. IE ≥7, Webkit, Gecko에서이 작업을 수행하려고합니다.

here jsfiddle보기

.frame {
    height: 25px;      /* equals max 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>




3 라인 솔루션 :

position: relative;
top: 50%;
transform: translateY(-50%);

이것은 모든 것에 적용됩니다.

here .




이 게시물에 올랐고 최신 솔루션에 관심이 있고 레거시 브라우저를 지원할 필요가없는 사용자는 다음과 같이 할 수 있습니다.

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: 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




PI의 CSS를 다음과 같이 설정해보십시오 display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;




배경 이미지 솔루션 이미지 요소를 모두 제거하고 div의 배경으로 .frame 클래스로 설정 .frame

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

적어도 IE8, FF6 및 Chrome13에서 제대로 작동합니다.

이 솔루션은 25px보다 큰 이미지를 축소하는 데는 효과가 없습니다. 요소의 크기를 설정하는 background-size 라는 속성이 있지만 IE7 요구 사항과 충돌하는 CSS3입니다.

브라우저 우선 순위를 다시 설정하고 사용 가능한 최상의 브라우저를 디자인하도록 조언하거나이 솔루션을 사용하려는 경우 서버 측 코드를 사용하여 이미지의 크기를 조정하십시오.




http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max 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;
}

key 속성은 display입니다. table-cell; .frame 용. Div.frame은 인라인으로 표시되므로 블록 요소로 묶어야합니다.

이것은 FF, Opera, Chrome, Safari 및 IE8 +에서 작동합니다.

최신 정보

IE7의 경우 CSS 표현식을 추가해야합니다.

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}



순수한 CSS http://jsfiddle.net/sandeep/4RPFa/72/ 와 함께이 솔루션을 사용해보십시오. html의 주요 문제점이 될 수 있습니다. html에서 image height 를 정의 할 때 인용 부호를 사용하지 마십시오.

CSS :

.frame {
    height: 25px;      /* equals max 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 태그 3px to 2px3px to 2px 공간으로 둡니다. 이제 나는 line-height 줄이고 그 일을한다. CSS :

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    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 속성은 다른 브라우저에서 다르게 render 됩니다. 그래서; 우리는 다른 line-height 프라퍼티 브라우저를 정의해야한다.

이 예제를 확인하십시오. http://jsfiddle.net/sandeep/4be8t/11/

Firefox 및 Chrome의 다양한 브라우저 입력 높이 차이로 line-height 에 대한이 예제를 확인하십시오.




또한 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/-128.png" />
</div>




나를 위해 일하는 쉬운 방법 :

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Google 크롬에서 잘 작동합니다. 이 브라우저를 다른 브라우저에서 사용해보십시오.




TABLE & TABLE CELL을 사용한 솔루션

때로는 테이블 / 테이블 셀로 표시하여 해결해야합니다. 예를 들어 빠른 제목 화면. 또한 W3에서 권장하는 방법입니다. W3C.org에서 센터링 (Centering) 항목 이라는이 링크를 확인하는 것이 좋습니다.

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

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

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

개인적으로 나는 실제로이 목적으로 헬퍼를 사용하는 것에 동의하지 않습니다.




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

기본적으로 이미지를 래핑합니다.

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; //only for align horizontally
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
//height: auto;
  vertical-align: middle;
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>




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

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



가장 좋은 해결책은

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



여기에 올린 JSFiddle 링크는 더 이상 작동하지 않으며, 아마 downvote의 이유입니다. 이 질문에 대한 올바른 대답을 위해서 jQuery 솔루션을 다시 게시하고 싶습니다. 이것은 v_align 클래스가 적용된 모든 요소에 적용됩니다. 부모에서 세로로 가운데에 정렬되며 창의 크기를 조정하면 다시 계산됩니다.

JSFiddle 링크

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}



텍스트 / 제목 뒤에있는 이미지를 정렬하고 둘 다 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 alligned after image inside a div by negative manipulate the img postion</h2>
</div>




Related