div의 수직 정렬 이미지

div의 수직 정렬 이미지

---

이 질문에 이미 답변이 있습니다.

• div 내부에서 이미지를 수직으로 정렬하는 방법 35 답변

div에서 이미지 세로 정렬에 문제가 있습니다.

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.img_thumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a>
</div>

내가 아는 한 "display : block;"이 필요합니다. 이미지를 중앙에 배치하면 작동합니다. 또한 튜토리얼에서 많은 답변을 찾았지만 모든 이미지가 같은 높이에 있지 않기 때문에 "유용"하지 않습니다!

---

컨테이너에 고정 된 높이가있는 경우 line-height를 높이와 동일하게 설정하면 세로 중앙에 위치합니다. 그런 다음 텍스트 정렬을 수평 중앙에 추가하십시오.

예 : http://jsfiddle.net/Cthulhu/QHEnL/1/

편집하다

코드는 다음과 같아야합니다.

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

이미지는 크기에 관계없이 항상 가로 및 세로 중앙에 배치됩니다. 다음은 크기가 다른 이미지가있는 2 개의 추가 예입니다.

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

최신 정보

이제 2016 년 (미래!)이며 몇 가지 사항이 변경되는 것 같습니다 (마침내 !!).

2014 년에 Microsoft는 모든 Windows 버전에서 IE8 지원을 중단하고 모든 사용자가 IE11 또는 Edge로 업데이트하도록 권장 한다고 발표 했습니다. 음, 이것은 다음 주 화요일 (1 월 12 일)에 일어날 예정입니다.

이것이 왜 중요합니까? IE8 의 발표와 함께 마침내 CSS3 마법을 사용할 수 있습니다 .

여기에 수평 및 수직으로 요소를 정렬하는 업데이트 된 방법이 있습니다.

.container {
    position: relative;
}

.container .element {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Using this transform: translate(); method, you don't even need to have a fixed height in your container, it's fully dynamic. Your element has fixed height or width? Your container as well? No? It doesn't matter, it will always be centered because all centering properties are fixed on the child, it's independent from the parent. Thank you CSS3.

If you only need to center in one dimension, you can use translateY or translateX. Just try it for a while and you'll see how it works. Also, try to change the values of the translate, you will find it useful for a bunch of different situations.

Here, have a new fiddle: https://jsfiddle.net/Cthulhu/1xjbhsr4/

For more information on transform, here's a good resource.

Happy coding.

---

Old question but nowadays CSS3 makes vertical alignment really simple!

Just add to the <div> this css:

display:flex;
align-items:center;
justify-content:center;

---

JSFiddle demo

Live Example:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    display:flex;
    align-items:center;
    justify-content:center;
}

<div class="img_thumb">
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images">
       <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" />
    </a>
</div>

---

you don't need define positioning when you need vertical align center for inline and block elements you can take mentioned below idea:-

inline-elements :- <img style="vertical-align:middle" ...>
                   <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>  

block-elements :- <td style="vertical-align:middle"> ... </td>
                  <div style="display:table-cell; vertical-align:middle"> ... </div>

see the demo:- http://jsfiddle.net/Ewfkk/2/

참고URL : https://stackoverflow.com/questions/10008670/vertical-align-image-in-div