div 내부에서 이미지를 수직으로 정렬하는 방법
다음을 포함하는 내부의 이미지를 정렬하려면 어떻게 해야 합니다.div?
예
이 예에서는 수직으로 중앙에 위치해야 합니다.<img>에 시대에<div>와 함께class ="frame":
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame의 높이가 고정되어 있고 이미지의 높이를 알 수 없습니다.다음에 새 요소를 추가할 수 있습니다..frame그게 유일한 해결책이라면.저는 이것을 인터넷 익스플로러 7과 그 이후의 웹킷, 게코에서 하려고 합니다.
여기에 있는 jsfidle을 참조하십시오.
.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>내가 아는 유일한 (그리고 최고의) 크로스 브라우저 방법은inline-block을 돕는 사람.height: 100%그리고.vertical-align: middle두 가지 요소 모두에서
그래서 해결책이 있습니다: http://jsfiddle.net/kizu/4RPFa/4570/
.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>또는 최신 브라우저에서 추가 요소를 사용하지 않고 Internet Explorer 식을 사용해도 상관 없는 경우 유사 요소를 사용하여 요소당 한 번만 실행되는 편리한 식을 사용하여 Internet Explorer에 추가하면 성능 문제가 발생하지 않습니다.
솔루션과 함께 제공하는 솔루션:before그리고.expression()Internet Explorer용: http://jsfiddle.net/kizu/4RPFa/4571/
.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>작동 방식:
개가 때.
inline-block가까이할 수 있기 에, 서가운까요소서, 정수있렬다습니할측에면으로 정렬할 수 .vertical-align: middle당신은 다음과 같은 것을 얻을 것입니다.
때 ( 높 가 고 정 있 경 는 우 이 블 된 （ in 이
px,em단위할 수 .%.- 그래서, 하나를 추가합니다.
inline-block와 함께height: 100%에서 다른 블록을 할 수 .inline-block그 안의 요소(<img/>(당신의 경우) 수직으로 그 근처에 있습니다.
유용할 수 있습니다.
div {
position: relative;
width: 200px;
height: 200px;
}
img {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.image {
min-height: 50px
}
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;
}
세 가지 솔루션:
position: relative;
top: 50%;
transform: translateY(-50%);
이것은 모든 것에 적용됩니다.
여기서.
순수 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
기존 브라우저를 지원할 필요가 없는 최신 솔루션의 경우 다음을 수행할 수 있습니다.
.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>Flexbox를 사용한 펜은 다음과 같습니다. http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
EDIT 1/13/22
와 CSS를 하는 더 place-content속기:
.frame-text-grid {
display: grid;
place-content: center;
/**
✪ "place-content" is the shorthand for "align-content" and "justify-content".
✪ The "place-content" shorthand requires two values, the first one is for "align-content" and the second one for "justify-content". If only one value is present (like in this demo), then that single value is applied to both directions.
✪ Comment the "place-content: center;" declaration above to see how the elements are spread along the height of the container.
**/
}<div class="ctnr frame-text-grid">
<h2>Using Grid and <code>place-content</code></h2>
<p>Only two lines are needed to center vertically and horizontally.</p>
</div>여기 CSS 그리드를 사용하는 펜이 있습니다: https://codepen.io/ricardozea/pen/c4e27f1e74542618d73e21f7c2276272?editors=0100
이러한 방식으로 영상을 수직으로 중앙에 배치할 수 있습니다(데모).
div{
height: 150px; // Internet Explorer 7 fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom: 0.25em;
}
또한 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>플렉스박스로 매우 간편한 솔루션이 있습니다!
.frame {
display: flex;
align-items: center;
}
당신이 가지고 있다고 상상해 보세요.
<div class="wrap">
<img src="#">
</div>
그리고 CSS:
.wrap {
display: flex;
}
.wrap img {
object-fit: contain;
}
CSS 그리드
단일 영상을 영상 용기 내부에 수직으로 정렬하려는 경우 다음을 사용할 수 있습니다.
.img-container {
display: grid;
}
img {
align-self: center;
}
.img-container {
display: grid;
grid-auto-flow: column;
background: #BADA55;
width: 1200px;
height: 500px;
}
img.vertical-align {
align-self: center;
}<div class="img-container">
<img src="https://picsum.photos/300/300" />
<img class="vertical-align" src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
</div>영상 컨테이너 내부에 여러 영상을 정렬하려는 경우 다음을 사용할 수 있습니다.
.img-container {
display: grid;
align-items: center;
}
.img-container {
display: grid;
grid-auto-flow: column;
align-items: center;
background: #BADA55;
width: 1200px;
height: 500px;
}<div class="img-container">
<img src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
<img src="https://picsum.photos/300/300" />
</div>사용한 적이 있습니다.grid-auto-flow: column그렇지 않으면 요소가 명시적 그리드 항목을 지정한 행으로 래핑되기 때문에 두 경우 모두에 적용됩니다.질문 코드에서도 항목이 수평으로 가운데에 표시됩니다.그런 경우에는 다음을 사용합니다.place-items: center에 align-items: center.
의 CSS를 PI로 해 볼 수 .display: table-cell; vertical-align: middle;
다음 코드를 사용할 수 있습니다.
.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>배경 이미지 솔루션
인 div의 했습니다..frame
적어도 Internet Explorer 8, Firefox 6 및 Chrome 13에서는 정상적으로 작동합니다.
확인해보니 이 솔루션은 25픽셀 이상의 이미지를 축소할 수 없습니다.라는 속성이 있습니다.background-size이는 요소의 크기를 설정하지만 Internet Explorer 7 요구 사항과 충돌하는 CSS 3입니다.
이 솔루션을 사용하려면 브라우저 우선순위를 다시 실행하고 사용 가능한 브라우저에 맞게 설계하거나 서버 측 코드를 가져와 이미지 크기를 조정하는 것이 좋습니다.
.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");
}
이 코드펜에 대한 데모에 나와 있는 것처럼 최신 브라우저(편집 시점 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 {}그래서 클래스가 있는 디브에 의해 포장된 이미지들만..frame대상이 될 것입니다.
다음과 같이 할 수 있습니다.
데모
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";
})
표 및 표 셀을 사용한 솔루션
때로는 테이블/테이블 셀로 표시하여 해결해야 합니다.예를 들어 빠른 제목 화면입니다.이것은 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>개인적으로 저는 이러한 목적을 위해 도우미를 사용하는 것에 대해 반대합니다.
나의 해결책: 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;
}
순수 CSS http://jsfiddle.net/sandeep/4RPFa/72/ 로 이 솔루션을 사용해 보십시오.
아마도 그것이 당신의 HTML의 주요 문제일 것입니다.c를 정의할 때 따옴표를 사용하지 않습니다.lass&image heightHTML에 저장합니다.
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태그 그것은 3픽셀에서 2픽셀 사이의 공간을 남기고 있습니다.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브라우저마다 다름: Firefox와 Chrome의 입력 높이 차이
Explorer에 는 잘 만, Firefox와 Chrome Explorer가 에는 Internet 를 사용합니다.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;
}
나에게 맞는 쉬운 방법:
img {
vertical-align: middle;
display: inline-block;
position: relative;
}
이것은 구글 크롬에서 매우 잘 작동합니다.다른 브라우저에서 사용해 보십시오.
다음과 같은 텍스트 외에 용기 내부(로고일 수 있음)의 이미지 중심을 맞추는 경우:
기본적으로 이미지를 랩으로 감습니다.
.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>픽셀 크기의 마진으로 살 수 있다면, 그냥 추가하세요.font-size: 1px;에▁.frame해, 지그것은..frame1em = 1px입니다. 즉, 여백도 픽셀 단위로 설정해야 합니다.
http://jsfiddle.net/feeela/4RPFa/96/
이제 더 이상 오페라에 집중되지 않습니다.
저도 같은 문제가 있었습니다.이것은 나에게 도움이 됩니다.
<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>
제가 선호하는 방법이 답변에 포함되어 있지 않다는 것을 알 수 있기 때문에 이 오래된 질문에 새로운 해결책을 추가합니다.
모든 프로젝트에서, 처음에, 저는 2개의 CSS 클래스를 만듭니다.
.flex-centered {
display: flex;
flex-direction-column;
justify-content:center
}
.abs-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
상황에 따라 두 가지 요소를 모두 중심에 둘 수 있습니다.
플렉스 중심은 페이지의 이미지와 콘텐츠에 더 다용도이며, 복근 중심의 니즈는 팝업과 같은 중심적인 디비에 좋습니다.
그래서 그냥 전화하세요.
<div class='flex-centered'>
<img>
</div>
이미지가 수직으로 중앙에 배치됩니다.
.flex-centered {
display: flex;
flex-direction: column;
justify-content: center;
}
/* this to center horizontally, too */
.m0a {
margin: 0 auto
}
/* Make a big parent grey */
.big-div {
height:200px;
width: 200px;
background:#ccc;
border-radius: 4px;
}
/* Make a small div to be centered */
.small-div {
height:20px;
width:20px;
background:red;
}<div class="flex-centered big-div" >
<div class="small-div m0a"></div>
</div>다음을 사용할 수 있습니다.
.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px; /* 50% of the height */
margin-left: -30px;
}
용사를 합니다.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> 텍스트/제목 뒤에 있고 둘 다 div 안에 있는 이미지를 정렬하시겠습니까?
JSfidle 또는 실행 코드 조각을 참조하십시오.
모든 요소(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>저는 센터 정렬을 위해 패딩을 사용하여 놀고 있습니다.최상위 외부 컨테이너 크기를 정의해야 하지만 내부 컨테이너의 크기가 조정되어야 하며 패딩을 다른 백분율 값으로 설정할 수 있습니다.
<div class='container'>
<img src='image.jpg' />
</div>
.container {
padding: 20%;
background-color: blue;
}
img {
width: 100%;
}
언급URL : https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div
'UFO ET IT' 카테고리의 다른 글
| 비트맵을 위치에 저장 (0) | 2023.06.02 |
|---|---|
| UITableView 로드 종료를 감지하는 방법 (0) | 2023.06.02 |
| UITableViewCell 내부의 버튼 클릭 (0) | 2023.06.02 |
| GitHub에서 분기 이름 변경 (0) | 2023.06.02 |
| Android에서 startActivityForResult를 관리하는 방법 (0) | 2023.06.02 |