kzen.dev
더보기
Question

세로로 정렬하려면 div 안에 이미지를 어떻게

어떻게 그런 이미지를 맞추십시오 div 내에 포함된 '?'

사례

내 acrobatconnectcentral. 데릭쉐퍼드와 중앙에 수직으로 &lt img&gt, '를', ',' 을 (를) ',' &quot 모함하는거 class = &quot div&gt <;:

<div class="frame" style="height: 25px;">
    <img src="
/embedded/result,js,html,css/">
.png" /> </div>

39, & # 39 에 높이 고정되어 있으며 image& 오프라임 '' s 높이를 알 수 없습니다. "만약 내가 할 수 있는 새로운 요소를 추가한 '오프라임 that& # 39 의 유일한 해결책입니다. # 39 m i& 하고, 이러한 것들을 Internet&amp Explorer&amp nbsp;;;; 7 이상에서 사용할 수 있을 만큼 웹킷, 게코.

[Here] [1] 이스피들 참조하십시오.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

.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="
/embedded/result,js,html,css/">
.png" height=250 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=25 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=23 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=21 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=19 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=17 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=15 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>

끝 - &lt 스니핏 >;!

Peter Mortensen
Peter Mortensen
편집된 질문11일 7월 2019 в 7:00
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
프로그래밍
image
css
vertical-alignment
이 질문은 영어로 1답번으로 되어 있는데, 그것을 읽으려면 로그 인. 당신이 보기에.
Solution / Answer

(그리고 최고의 크로스 브라우저) 방식으로 사용할 수 있는 유일한 그러니까말이야 인라인 블록 '도우미' 와 '높이: 100% '와' 수직 정렬: 중간 '의 두 요소가.

그래서 해결책은 있다.

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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

끝 - &lt 스니핏 >;!

39 don& 할 경우, 또는 t t mind, 최근의 브라우저에서 및 추가 요소를 사용하여, Explorer 표현식에서는 Internet&amp don& # 39, 빨리, 빨리, 탐색기를 사용하여 Internet&amp 추가해야 dtep 요소점 사용할 수 있습니다, 한 번만 실행할 수 있는 편리한 표현식에서는 호스트당 요소 때문에 따로 won& # 39, t, 모든 성능 문제:

이 솔루션은 전에 () '을 (를)', '와' 표현식에서는 internet&amp nbsp, 탐색기: http://jsfiddle.net/kizu/4RPFa/4571/

<! - begin 스니핏: js 숨기십시오: 참 - &gt.

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

끝 - &lt 스니핏 >;!

How it works.

  1. 서로 가까이 있을 때, 각 요소를 인라인 블록 '2', 's side, 그리고 수직 정렬 other& # 39 정렬할 수 있습니다. # 39, you& 가운데 'll get 이 같은 일이.

2 블록 정렬되고!

  1. 경우 블록 고정되어 있는 높이 (px 에서 '다른' 또는 ',' em 절대 단위), 내부 블록에 '%' 의 높이를 설정할 수 있습니다.
  2. 그래서 하나 추가하는 '을 (를)', '인라인 블록 높이: '다른' 블록 '의 100% 고정되어 있는 높이 다시그것들을 맞추십시오 인라인 블록 요소점 항목이없습니다 (', '네 경우엔, &lt img/&gt) 근처에서 세로일 거잖나.
2046
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

이 유용할 수 있습니다.

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/

496
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

  • 39 의 시작이 좋은 이미지를 가지고 있지만, 큰 matejkramny& 솔루션은 잘못된 ratio.*

39 의 here& 내 포크하지:

데모: html, css, 출력입니다 https://jsbin.com/lidebapomi/edit?

[미리봅니다] (https://i.imgur.com/Fgh89yb.png)!

&lt hr/>;

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

한 솔루션이므로 추가되었다.

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

아무것도 적용됩니다.

[Here] 에서 1.

242
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

A 순결케 CSS 해결책:

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

.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="
/embedded/result,js,html,css/">
.png" height=250 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=25 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=23 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=21 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=19 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=17 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=15 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>

끝 - &lt 스니핏 >;!

주요 항목

// 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
dota2pro
dota2pro
편집된 답변12일 11월 2019 в 8:23
133

좀 더 현대적인 위한 경우, 기존 브라우저 솔루션을 지원할 필요가 없습니다, 이 작업을 수행할 수 있습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

39 here&; s 펜. http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Peter Mortensen
Peter Mortensen
편집된 답변11일 7월 2019 в 7:27
116
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

이 방법은 센터급 이미지를 세로일 (데모).

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}
100

또한 플렉상자 정확한 결과를 얻기 위해 사용할 수 있습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

Peter Mortensen
Peter Mortensen
편집된 답변11일 7월 2019 в 9:49
36
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

There is a 솔루션을 통해 슈퍼 쉽냐구요 플렉상자!

.frame {
    display: flex;
    align-items: center;
}
26

Css pi 를 설정 할 수 있습니다 '디스플레이: 표에서. 수직 정렬: '중간.

22
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

아래 코드를 실행할 수 있습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
<div class="frame" style="height: 25px;">
    <img src="
/embedded/result,js,html,css/">
.png" /> </div>

끝 - &lt 스니핏 >;!

Peter Mortensen
Peter Mortensen
편집된 답변11일 7월 2019 в 7:29
16
  • 배경 이미지 솔루션 *

내가 재거됨 이미지 요소를 모두 갖춘 it 배경으로 설정하고 div 학번 오프라임 '

적어도 이 Internet&;;; 빨리 빨리, 빨리 대해 과태료 작동됨 Explorer&amp Firefox&amp &amp, 크롬, 6, 8, nbsp. 13.

이 솔루션은 확인해봤는데, 큰 이미지를 높이 25 명이 넘는 픽셀입니다 줄어들 것으로 작동하지 않습니다. 특성 '설정' 이라는 좁히어 배경 크기 요소의 크기를 않는 것은, 빨리, 빨리, 빨리 explorer&amp 충돌합니다 internet&amp 있는 css& 3;; 7 홍보하십시오.

나라면 어떤 브라우저를 사용할 수 있는 가장 좋은 방법은 우선 순위 및 디자인 너회가 조언을 명령복구 브라우저, 또는 좀 서버측 코드를 크기조정할 you& 이미지를 사용할 경우, d # 39 이 솔루션을.

14
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

이 작업을 수행할 수 있었습니다.

>데모
>

/embedded/result,js,html,css/">

>CSS> 
.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 
60px;
    border: 
px solid red;

    text-align: center; 
    margin: 
em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 
60px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

&lt br/>;

>JavaScript> 
$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})
11 

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

주요 속성은 '디스플레이: 표에서 오프라임 ',' 는 '. '' 로 표시되는 데이비드프라임 인라인 대체하십시오 안에 마무리 할 수 있도록 블록 요소.

이 작품은 오페라, 파이어폭스, 크롬, 사파리, 빨리, 빨리 Explorer&amp 있는 Internet&;; 8 (이상).

업데이트

빨리, 빨리 Explorer&amp Internet&;; 7 의 CSS 표현식에서는 추가해야 합니다.

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
11
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

하지만, 익스플로러, 파이어폭스, 크롬, i am not 확신하는 Internet&amp 빨리 아래에 있는 경우 (img) ',' 다음 '에서' 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;
}
7

이 솔루션을 통해 시도하시겠습니까 순결케 CSS

어쩌면 가장 중요한 문제가 HTML. 프랑스 파리 ~ 'c' 인용 # 39, re you& 사용하지 않는 정의할 때 &amp. '높이' 의 이미지를 너회의 HTML.

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 '태그' 를 중심으로 일을 it& # 39 의 공간 '에서' 3 대 2 로 픽셀입니다 것가운데 픽셀입니다. 이젠 ',' s 라인 높이 감소 및 it& # 39, 작업 중.

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

이 '속성' 라인 높이 렌더링됩니다 브라우저마다 다르게. 그래서 우리는 우리가 정의하십시오 '속성' 라인 높이 다른 브라우저.

이걸 예: http://jsfiddle.net/sandeep/4be8t/11/

예를 들어 '이것' 라인 높이 차이가 약 다른 브라우저: , https://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome

7
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

내 해결책: [

] [1]

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

이용하여 솔루션을 테이블과 테이블 셀입니다

테이블로 / 표에서 표시하여 해결해야 할 경우도 있습니다. 예를 들어, 빠른 타이틀 화면이. W3 컴포지션이 권장됨 방식으로 있다. 내가 선택한 이 링크를 추천합니까 불렀으매 [블록 또는 이미지 중심으로] [1] 출처: W3C.org.

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

  • 절대 포지셔닝도 컨테이너입니다 표로 표시된
  • 수직 정렬되고 표에서 로 표시된 내용 가운데

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

[1]: https://www.w3.org/Style/Examples/007/center.en.html # 블록

개인적으로 알고 이를 위해 사용하는 대한 사실 그렇지 않다.

Peter Mortensen
Peter Mortensen
편집된 답변11일 7월 2019 в 7:31
6
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev

상상할 수 있어야 합니다.

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

및 css.

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

쉽게 사용할 수 있는 날.

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

업무용 구글 크롬 작동하잖아 잘 았겠습니다. 이 중 한 명, 시도하시겠습니까 다른 브라우저.

Peter Mortensen
Peter Mortensen
편집된 답변11일 7월 2019 в 7:26
5
질문이 있으신가요? 사이트에 추가하고 즉시 답변을 받으세요.
ko.kzen.dev