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


1456

이미지를 포함하는 이미지 안에 어떻게 정렬 할 수 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>


3
안녕하세요, 죄송하지만 여기에서 가장 유용한 솔루션이되는 도우미 사용에 동의하지 않습니다. 그러나 이것이 유일한 방법은 아닙니다. 다른 브라우저에서도 동일하게 지원됩니다. 정보에 대한 stackoverflow.com/a/43308414/7733724 및 W3C.org의 솔루션을 여기에 제공합니다. 확인할 수 있습니다. 건배

W3C에 관한 Reading Centering Things 기사가 유용 할 것입니다 : w3.org/Style/Examples/007/center.en.html
QMaster

답변:


2128

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

따라서 해결책이 있습니다 : http://jsfiddle.net/kizu/4RPFa/4570/

또는 최신 브라우저에서 추가 요소를 원하지 않고 Internet Explorer 표현식을 사용하지 않으려는 경우 의사 요소를 사용하고 편리한 Expression을 사용하여 Internet Explorer에 추가 할 수 있습니다. 성능 문제가 없습니다.

와 솔루션 :beforeexpression()Internet Explorer 용 : http://jsfiddle.net/kizu/4RPFa/4571/


작동 방식 :

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

    두 개의 정렬 된 블록

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

  3. 따라서 고정 높이의 블록에 하나 inline-block를 추가하면 height: 100%다른 inline-block요소 ( <img/>귀하의 경우) 근처에 수직으로 정렬 됩니다.

2
: 당신은 직접 볼 수 jsfiddle.net/kizu/Pw9NL가 인라인 박스 상자를 생성하지 않지만, 다른 모든 경우는 확인 작업 -.
kizu

3
아주 좋은 대답입니다. 인라인 블록 요소 사이의 공백으로 고심 .frame하고 .frame:before있었습니다. 여기 에 제안 된 솔루션 은에 추가 margin-left: -4px하는 것 .frame입니다. 도움이 되었기를 바랍니다.
Mick

111
추가 된 도우미 <img src=""/>내부에 다음 이 없는지 확인하십시오 <span></span>. 밖에 있습니다. 나는 이것을 깨닫지 못하여 머리카락의 모든 가닥을 당겼다.
ryan

50
"공백 : nowrap;"도 추가해야 할 것 같습니다. 이미지와 도우미 범위 사이에 줄 바꿈이 있으면 문제가 발생합니다. 이 솔루션이 왜 효과가 없는지 한 시간이 걸렸습니다.
juminoz

2
필자의 경우 이미지의 최대 높이와 ​​최대 너비가 모두 100 %로 설정되어 이미지가 컨테이너의 크기를 조정 하므로이 방법이 작동하지 않았습니다. 내 해결책은이 값을 90 %로 변경하는 것입니다 (제 경우에는 괜찮습니다. 다른 상황에서는 컨테이너의 크기를 적절하게 조정해야 할 수도 있음). 또한 이미지의 다른면에 도우미를 추가하여 패딩이 계속 유지되도록하십시오 양쪽.
Eric Dubé

513

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

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

74
이미지를 수평으로 정렬하려면 왼쪽을 추가하십시오 : 0; 오른쪽 : 0; img
jameskind

이것은 IE10에서 작동하지 않는 것입니까? 나는 여기저기서 이것을 사용한다
Max Yari

또한 컨테이너 사업부가 갖는 (나를 위해) 일position:fixed;
PJ 검은 머리

1
가장 쉽고 깨끗한 솔루션 덕분입니다!
KDT

감사! 나를 위해 일했다!!
Alexander Malygin

486

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

대형 이미지를 확대 / 축소 할 수 있도록이 방법을 조정할 수있는 방법 (2 배), 여전히 가로와 세로 중앙에 유지됩니까?
저스틴

중간이 아닌 수직 정렬 하단에서 작동하게하려면 어떤 코드를 수정해야합니까?
bobo

1
@bobo는을 제거합니다 top: 0;. 결과적으로 bottom: 0;세로 로만 적용됩니다.
jomo

가장 좋은 답변!
user315338

276

3 줄 솔루션 :

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

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

에서 여기 .


접두사 : -ms- 또는 -webkit- (변환 전). w3schools.com/cssref/css3_pr_transform.asp
호르헤 Orpinel

3
IE9 접두어이지만 IE8 이하에서는 전혀 작동하지 않습니다 : caniuse.com/#search=transform 그러나 내 의견 : IE8에 대해서는 신경 쓰지 않습니다
Reign.85

중앙에 배치 할 자식이 기기 화면보다 키가 크고 부모가 DOM의 첫 번째 자식 일 때 어떤 일이 발생했는지 아무도 눈치 채지 못했습니까?
tao

3
position: absolute;흐르는 너비가 필요 하기 때문에 사용할 수 없을 때 좋습니다 .
plong0

2
현재 대부분의 브라우저에서 최신 브라우저와 이전 브라우저를 모두 지원하는 flexbox보다 훨씬 우수한 최상의 솔루션입니다. 이것을
찬성하라

141

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

IE5에서도 작동하는 안내서를 참조하십시오 (지금까지 읽은 내용에서 차감) webmasterworld.com/css/3350566.htm
Matej

이 솔루션은 좋은 시작이지만, 큰 이미지는 잘못된 비율로 크기가 조정됩니다 . 내 대답을 참조하십시오.
jomo

@ HansWürstchen 네, 그러나 핵심은 디자인 선택입니다. 더 많은 CSS 추가 = 더 많은 혼란 :)
Matej

1
@matejkramny이되지 않습니다 얻을 대형. 경우 이미지가 있습니다 대형, 그것은 잘못된 비율을 가지고있다. 그것은 높이가 늘어나고 제대로 보이지 않음을 의미합니다.
jomo

✔ 와우, 이것은 넘친 이미지 (래퍼보다 큼)에서 작동하지만 허용되는 대답은 아닙니다.
Cedric Reichenbach

120

보다 현대적인 솔루션을 원하고 레거시 브라우저를 지원할 필요가없는 경우 다음을 수행 할 수 있습니다.

.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


3
이것은 컨테이너의 높이가 설정되지 않은 경우 특히 유용합니다
Dave Barnett

또는 align-self개별 항목
Michael

문제 align-self는 플렉스 아이템이 부모 컨테이너의 높이를 늘릴 것이라는 점입니다.
Ricardo Zea

101

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

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

4
이상하게도 내 상황에서 작동하도록 허용 된 답변을 얻을 수 없었습니다 (오버플로로 이미지를 자르는 중 : 숨김). 이것은 현명하게 작동했습니다.
Luca Spiller

3
Chrome에서만 이것을 테스트했지만 라인 높이가 핵심으로 보입니다. 내 img가 앵커 (<a/>) 안에 있기 때문에 img 대신 div에 vertical-align 속성을 넣습니다.
토드 가격

1
예, 수용 된 솔루션보다 훨씬 간단하고 아름답게 작동합니다. 또한 jsfiddle에서이 솔루션을 찾았습니다.
vdboor

1
당신이 수용 할 수있는 높이를 알고 있다면, 이것은 꽤 잘 작동합니다.
KrekkieD

내 expierence 에서이 솔루션은에 대해서만 작동 font-size: 0합니다 div. 꽤 큰 컨테이너의 경우 놓칠 수 있지만 div100px이고 img가 80px 인 경우 몇 픽셀 낮습니다.
alTus

38

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


28

flexbox 에는 매우 쉬운 솔루션이 있습니다!

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

5
예, 그러나 모든 답변에서 거의 볼 수는 없습니다. 다른 모든 답변보다 훨씬 쉬운 솔루션이므로 간단하고 명확하게 강조하려고했습니다.
BBlackwo

이것은 또한 나를 위해 일한 가장 좋은 대답입니다. 그러나 내 경우에는 "인라인 플렉스"프레임에서 더 잘 작동했습니다. 그리고 그 안에있는 이미지에 대해 "수직 정렬 : 중간"을 추가했습니다.
소피 쿠퍼 맨

22

PI의 CSS를 display: table-cell; vertical-align: middle;


다양한 방법을 보았지만이 방법은 나에게 새롭습니다 (2013 년에도).
Mike Ebert

이미지를 테이블 중앙에 놓는 것보다 낫습니다.
Jonats

3
display : table-cell은 너비를 100 %로 설정하려는 경우 항상 올바르게 크기를 조정하지 않습니다.
Redtopia

1
" PI" 는 무엇입니까 ?
Peter Mortensen

18

아래 코드를 시도해보십시오 :

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


14

배경 이미지 솔루션

이미지 요소를 모두 제거하고 클래스가있는 div의 배경으로 설정했습니다. .frame

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

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

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

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


그러나 매우 좋은 해결책이지만 일부 이미지는 컨테이너보다 클 것으로 예상 되며이 경우 최대 높이 / 최대 너비를 사용할 계획이었습니다. 배경 이미지로 이것을 할 수있는 방법이 있습니까?
Arnaud Le Blanc

이것은 ".frame 요소"가 아니라 ".class 클래스를 가진 div"입니다
JGallardo

이미지 높이가 프레임 div의 높이를 초과하지 않으면 이것이 가장 간단하고 최상의 해결책입니다 ...
efirat

13

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

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

그리고 CSS :

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

우아! 플렉스 정말 rulzzzz! 감사합니다!
페드로 페레이라

자녀가 부모의 전체 너비를 차지하고 가운데에 수직으로 정렬되도록하려면 개체 맞춤 커버를 사용하십시오. 참조 css-tricks.com/snippets/css/a-guide-to-flexbox을 플렉스 박스를 사용하여 부모의 이미지 주위를 이동
mattdlockyer을

11

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

데모

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

좋은. 순수한 CSS 솔루션에 대한 기회?
Arnaud Le Blanc

불행히도 테이블을 사용하거나 이전 버전의 IE와의 호환성을 삭제하지 않는 한 아닙니다. :( 만약 당신이 이미지의 정확한 크기를 미리 알고 있었다면 그것은 다를 것이지만 CSS 없이는 불가능하지 않을 것입니다.
Joseph Marikle

@Joseph 테이블로 어떻게 고치겠습니까?
Benjamin Udink ten Cate

: @Benjamin Udink 열 케이트 그것의 혼란은 있지만이 방법으로 수행 될 수 jsfiddle.net/DZ8vW/2 (이 권고하지 않습니다,하지만 작동합니다)
조셉 Marikle

1
arnauds 요구에 완벽하게 맞습니다. JS는없고 CSS와 HTML 만 있습니다.
Benjamin Udink ten Cate

11

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

큰. 자바 스크립트를 피할 IE7에 대한 해킹?
Arnaud Le Blanc

확실하지 않지만 CSS 표현이 도움이 될 것입니다. 그러나 그들은 또한 자바 스크립트입니다. 유일한 차이점은 js가 아닌 CSS 파일로 작성한다는 것입니다.
Webars

예, 좋은 생각입니다. 더 관리하기 쉽고 (필요에 따라 스크립트가 자동으로 실행 됨) IE7 전용이므로 괜찮습니다.
Arnaud Le Blanc

7

내 솔루션 : 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;
}

7

이것은 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타겟팅되도록 사용했습니다.


ie7 만, line-height : 25px;
anglimasS

1
파이어 폭스와 크롬에서도 올바르게 정렬되지 않은 것 같습니다 ( jsfiddle.net/4RPFa/19 )
Arnaud Le Blanc

7

순수한 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다른 브라우저에서 다른 : 파이어 폭스와 크롬에서 입력 높이 차이를


2
작동하지 않습니다 (적어도 Firefox에서는). 누락 된 따옴표의 경우 HTML5에서 허용됩니다 (하지만 jsfiddle에서 어떤 doctype이 사용되는지 모르는 경우)
Arnaud Le Blanc

7

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

불행히도 IE8 +. 나에게는 괜찮지 만 다른 사람들에게는 그렇지 않을 수도 있습니다.
TheCarver

또한 display:table-cell;너비로 %를 허용하지 않습니다
Mutmatt

7

테이블 및 테이블 셀을 사용하는 솔루션

때로는 테이블 / 테이블 셀로 표시하여 해결해야합니다. 빠른 제목 화면을 예로들 수 있습니다. 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>

개인적으로 저는이 목적을 위해 헬퍼를 사용하는 것에 동의하지 않습니다.


6

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

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

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


6

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

여기에 이미지 설명을 입력하십시오

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

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


4

픽셀 크기의 여백으로 살 수 있다면에 추가 font-size: 1px;하십시오 .frame. 하지만 지금은.frame 1em = 1px이므로 여백도 픽셀로 설정해야합니다.

http://jsfiddle.net/feeela/4RPFa/96/

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


3

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

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

실제로 이미지의 "위치 : 고정"은 저에게 효과적이었습니다. 제 작품에서 더 이상 작동하지 않는 테이블 셀 방법을 제안하는 사람들의 수많은 허위 답변에 좌절했습니다. algreat가 제안한 방법으로 추가 컨테이너가 필요하지 않습니다.
Vasilios Paspalas

2

이것을 사용할 수 있습니다 :

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

1

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


0

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

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

0

가장 좋은 해결책은

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

0

이것을 사용하십시오 :

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

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


0

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.