div 내부에 이미지를 세로로 중앙에 배치하는 방법
다음과 같은 마크 업이 있습니다.
<div>
<img />
</div>
div가 img보다 높습니다.
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}
이미지가 div 중간에 있어야합니다 (위와 아래에 동일한 공백이 있음).
나는 이것을 시도했지만 작동하지 않습니다.
div {
vertical-align: middle;
}
이미지가 순전히 장식적인 경우 배경 이미지로 사용하는 것이 더 의미있는 솔루션 일 수 있습니다. 그런 다음 배경의 위치를 지정할 수 있습니다.
background-position: center center;
장식용이 아니고 귀중한 정보를 구성하는 경우 img 태그가 정당화됩니다. 이 경우해야 할 일은 다음 속성을 포함하는 div의 스타일을 지정하는 것입니다.
div{
display: table-cell; vertical-align: middle
}
여기에서이 기술에 대해 자세히 알아보십시오 . IE6 / 7에서 작동하지 않는 것으로보고되었습니다 (IE8에서 작동).
또 다른 방법은 컨테이너 div에 라인 높이를 설정하고 vertical-align : middle을 사용하여 이미지를 정렬하는 것입니다.
html :
<div class="container"><img></div>
CSS :
.container {
width: 200px; /* or whatever you want */
height: 200px; /* or whatever you want */
line-height: 200px; /* or whatever you want, should match height */
text-align: center;
}
.container > img {
vertical-align: middle;
}
내 머리 꼭대기에서 벗어났습니다. 그러나 나는 이것을 전에 사용했습니다-그것은 트릭을 할 것입니다. 이전 브라우저에서도 작동합니다.
div class = "box"의 중앙 (가로 및 세로)에 이미지 (40px X 40px)를 배치한다고 가정 해 보겠습니다. 따라서 다음과 같은 html이 있습니다.
<div class="box"><img /></div>
당신이해야 할 일은 CSS를 적용하는 것입니다 :
.box img {
position: absolute;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -20px;
}
div는 크기를 변경할 수도 있으며 이미지는 항상 중앙에 있습니다.
이것은 CSS에서 수직 센터링을 수행하기 위해 이전에 사용한 솔루션입니다. 이것은 모든 최신 브라우저에서 작동합니다.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
발췌 :
<div style="display: table; height: 400px; position: relative; overflow: hidden;">
<div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
<div style="position: relative; top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
(데모 목적을위한 인라인 스타일)
또 다른 옵션은 설정하는 것입니다 display:block온 img후 설정margin: 0px auto;
img{
display: block;
margin: 0px auto;
}
나도 브라우저 간 CSS에 의해 계속 실망하고 있으므로 여기에 JQuery 솔루션을 제공하고 싶습니다. 이것은 각 이미지의 상위 div의 높이를 가져 와서 2로 나누고 이미지와 div 사이의 위쪽 여백으로 설정합니다.
$('div img').each(function() {
m = Math.floor(($(this).parent('div').height() - $(this).height())/2);
mp = m+"px";
$(this).css("margin-top",mp);
});
크로스 브라우저 방식으로 세로 정렬에 대해 게시했습니다 ( CSS로 여러 상자를 세로로 가운데에 배치 )
1 셀 표를 만듭니다. 표에만 브라우저 간 세로 정렬이 있습니다.
div 중간에있는 이미지
div img{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
height:50px;
width:50px;
}
귀하의 예에서 div의 높이는 정적이고 이미지의 높이는 정적입니다. 이미지에 다음 margin-top값을 지정하십시오.( div_height - image_height ) / 2
이미지가 50px이면
img {
margin-top: 25px;
}
div에 여백을 설정해 보셨습니까? 예 :
div {
padding: 25px, 0
}
상단 및 하단. 백분율을 사용할 수도 있습니다.
div {
padding: 25%, 0
}
<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;">
<img src="imges/import.jpg" width="200" height="200"/>
</div>
The accepted answer did not work for me. vertical-align needs a partner so that they can be aligned at their centers. So I created an empty div with full height of the parent div but with no width for the image to align with. inline-block is needed for both objects to stay in one line.
<div>
<div class="placeholder"></div>
<img />
</div>
CSS:
.class {
height: 100%;
width: 0%;
vertical-align: middle;
display: inline-block
}
img {
display: inline-block;
vertical-align: middle;
}
div {
width:200px;
height:150px;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:box;
box-pack:center;
box-align:center;
}
<div>
<img src="images/logo.png" />
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {
$.fn.verticalAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah)/2);
$(this).css('margin-top', mh);
});
};
})(jQuery);
$(document).ready(function(e) {
$('.in').verticalAlign();
});
</script>
<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>
<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>
</body>
</html>
참고URL : https://stackoverflow.com/questions/2237636/how-to-vertically-center-image-inside-div
'Development Tip' 카테고리의 다른 글
| rails db : migrate 대 rake db : migrate (0) | 2020.11.10 |
|---|---|
| 배치 파일을 통해 txt 파일의 특정 줄 삭제 (0) | 2020.11.10 |
| 파이썬에서 문자가 대문자인지 확인하는 방법은 무엇입니까? (0) | 2020.11.10 |
| Rails 마이그레이션에서 한 열을 다른 열의 값으로 업데이트 (0) | 2020.11.10 |
| iOS 앱에서 Facebook 페이지 링크 열기 (0) | 2020.11.09 |