div 내에서 이미지를 가운데와 가운데에 정렬

source

div 내에서 이미지를 가운데와 가운데에 정렬

lovecheck 2023. 8. 10. 18:53

div 내에서 이미지를 가운데와 가운데에 정렬

나는 다음 디브이를 가지고 있습니다.

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

div의 중간과 중심에 위치하도록 이미지를 정렬하는 방법은 무엇입니까?

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

제이에스아이들

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

이 작업은 Flexbox 레이아웃을 사용하여 수행할 수도 있습니다.

정적 크기

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}

<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

동적 크기

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}

<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

저는 이 기사에서 레이아웃 사용법을 설명하는 예시를 발견했습니다.

제가 보기에는 당신도 그 이미지가 컨테이너 안에서 수직으로 중심을 잡기를 원했던 것 같습니다. (나는 그것을 제공하는 어떤 대답도 보지 못했습니다.)

작업 피들:

순수 CSS 솔루션
문서 흐름을 중단하지 않음(플로트 또는 절대 위치 지정 없음)
브라우저 간 호환성(IE6도 마찬가지)
완벽한 대응.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

참고: 이 솔루션은 모든 요소 내에서 요소를 정렬하는 데 유용합니다.IE7의 경우, 적용 시.Centered블록 요소에 대한 수업, 당신은 다른 속임수를 사용해야 할 것입니다.inline-block 블록을 잘 (IE6/IE7은 블록 요소의 인라인 을 사용하지 않습니다.

img.centered {
   display: block;
   margin: auto auto;
}

를 사용하여 쉽게 이 작업을 수행할 수 있습니다.display:flexCSS 속

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

여기에 제시된 다른 솔루션과 관련하여 여전히 몇 가지 문제가 있었습니다.마지막으로, 이것은 저에게 가장 효과적이었습니다.

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

이 페이지에서 해당 접근 방식에 대한 자세한 내용을 읽을 수 있습니다.

Daaux의 답변은 효과가 있지만, 인라인 css를 제거하는 것이 더 깨끗할 것 같습니다.

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="example" id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

기본적으로 오른쪽 및 왼쪽 여백을 자동으로 설정하면 이미지가 중앙 정렬됩니다.

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

이 방법이 더 간단합니다.

#over > img{
    display: block;
    margin:0 auto; 
}

음, 우리는 2016년에...플렉스박스를 사용하면 어떨까요?반응성도 좋습니다.즐거운 시간 되세요.

#over{
display:flex;
align-items:center;
justify-content:center;
}

<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

심플. 2018년.FlexBox.브라우저 지원을 확인하려면 - 사용할 수 있습니까?

최소 솔루션:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}

가능한 한 광범위한 브라우저 지원을 받으려면 다음을 수행합니다.

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}

img를 표시하도록 설정합니다. superior div를 text-align으로 설정한 상태에서 superior-block:center도 이 작업을 수행합니다.

편집: 디스플레이를 가지고 노는 사람들에게: 인라인 블록 >>> 예를 들어 두 개의 디브가 좋아한다는 것을 잊지 마세요.

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

(여기서 보는 바와 같이) 정말로 그들 사이에 공간이 없습니다.

기본적으로 이러한(인라인 블록 고유의) 차이를 방지합니다.이 간격들은 제가 지금 쓰고 있는 두 단어 사이에서 볼 수 있습니다! :-) 그래서..이것이 여러분 중 일부에게 도움이 되기를 바랍니다.

저는 여러 가지 방법을 시도해 보았지만 컨테이너 div 내부의 여러 인라인 요소에 대해서만 작동합니다.여기 div의 모든 것을 가운데에 정렬하는 코드가 있습니다.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

샘플 코드는 다음과 같습니다. https://jsfiddle.net/yogendrasinh/2vq0c68m/

CSS 파일

.over {
    display : block;
    margin : 0px auto;

이에 대해 표시된 답은 이미지를 수직으로 정렬하지 않습니다.최신 브라우저에 적합한 솔루션은 플렉스박스입니다.플렉시블 컨테이너는 항목을 수평 및 수직으로 정렬하도록 구성할 수 있습니다.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>

부모 div css 속성 "text-align:center;"를 설정하면 됩니다.

 <div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>

이것은 이미지를 중앙에 맞춰야 하고 부모님의 div to 이미지가 전체 화면을 덮고 있을 때 저에게 효과가 있었습니다. 즉, 높이:100% 및 너비:100%입니다.

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

다음 최소 코드를 사용해 보십시오.

<div class="outer">
    <img src="image.png"/>
</div>

그리고 CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}

많은 대답이 사용을 제안합니다.margin:0 auto그러나 이것은 중심을 맞추려는 요소가 왼쪽이나 오른쪽에 떠 있지 않을 때만 작동합니다. 즉,floatCSS 특성이 설정되지 않았습니다.이 작업을 수행하려면 다음을 적용합니다.display의 탓으로 돌리다.table-cell그런 다음 자동에 좌우 여백을 적용하여 스타일이style="display:table-cell;margin:0 auto;"

    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}

중앙을 수평으로 배치합니다.

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

다른 방법:

#over img {
    display: inline-block;
    text-align: center;
}

중앙을 수직으로 배치합니다.

   #over img {

           vertical-align: middle;
        }

이것은 저에게 효과가 있었습니다.

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}

이것이 저에게 효과가 있었습니다.

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'참고: 이 경우 '브랜드 이미지'와 연결된 CSS 클래스가 없습니다.

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

포지셔닝을 사용합니다.다음은 저에게 효과가 있었습니다.

영상의 중앙으로 줌하여(영상이 div를 채웁니다):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

영상의 중심을 확대/축소하지 않고(영상이 div를 채우지 않음)

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

높이가 100%인 div는 브라우저의 전체 높이를 의미하지 않기 때문에 대부분의 솔루션이 작동하지 않습니다.

높이 사용: 100vh, 작동합니다.

<style type="text/css">
body {
  margin: 0;
}

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
    vertical-align: middle;
}
</style>

<div id="over">
  <img src="test.png" alt="test" width="600">
</div>

이 솔루션을 확인할 수 있습니다.

상자에서 이미지의 가로 및 세로 중심 맞추기

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

간단한 방법은 div와 이미지 모두에 대해 별도의 스타일을 만든 다음 독립적으로 배치하는 것입니다.이미지 위치를 50%로 설정하려면 다음과 같은 코드가 있어야 합니다.

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}

<div id="over">
 <img src="img.png" id="img">
</div>

언급URL : https://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div

'source' 카테고리의 다른 글

클래스 기반 뷰와 아약스를 사용하는 장고 앱? (0)	2023.08.10
Galera Cluster 및 MaxScale을 사용하여 다중 DB 서버를 사용하여 mariaDB 쿼리를 가속화하는 방법은 무엇입니까? (0)	2023.08.10
텍스트 보기 하이퍼링크의 색상을 변경하는 방법은 무엇입니까? (0)	2023.08.10
변수/포인트의 유형을 C로 출력할 수 있는 방법이 있습니까? (0)	2023.08.05
PowerShell 스크립트를 깃 후크로 실행 (0)	2023.08.05

현재글div 내에서 이미지를 가운데와 가운데에 정렬

각종 프로그래밍 정보를 다루는 블로그입니다.

spring-boot, mariaDB, ASP.NET, sql-server, Excel, C, mysql, reactjs, Python, PHP, JQuery, WPF, oracle, java, javascript, JSON, git, Wordpress, AJAX, AngularJS,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

lovecheck

div 내에서 이미지를 가운데와 가운데에 정렬

div 내에서 이미지를 가운데와 가운데에 정렬

CSS

HTML

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

div 내에서 이미지를 가운데와 가운데에 정렬

div 내에서 이미지를 가운데와 가운데에 정렬

CSS

HTML

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바