절대 위치 지정없이 div 안에 이미지 가운데 놓기

절대 위치 지정없이 div 안에 이미지를 가운데 놓으려고합니다. 그 이유는 그림이 페이지에있을 수있는 다른 div에 오버플로되기 때문입니다. 예를 들어, div가 버튼을 포함 할 div 위에 있지만 이미지가 그 위에 넘치고 있습니다. 절대 위치 지정없이 이미지를 가운데에 배치 할 수있는 방법이 있습니까?절대 위치 지정없이 div 안에 이미지 가운데 놓기

몇 가지 추가 정보 - 전자를 사용하고 있습니다. 이미지는 실제로 캔버스 (canvas.toDataURL())에서 가져온 IPC를 사용하여 기본 프로세스로 전송 된 base64 인코딩 이미지입니다. 이 후 창 위치가 다른 html 파일로 변경되고 새 페이지가 완전히로드되면 IPC를 통해 이미지를 다시 수신하라는 요청이 전송됩니다. 그런 다음 이미지가 페이지의 img 태그에 삽입됩니다. SRC에 설정

$(document).ready(function() { 
    ipcRenderer.send('display-snap'); 
    ipcRenderer.on('reply-snap', (event, arg) => { 
     $("#snapshot").attr("src", arg); 
     //$("#snapshot").css('background-image', 'url(' + arg + ') no-repeat center center'); 
    }); 
});

는 작동하지만 주석 코드가 작동하지 않습니다 (내가 IMG 대신 사업부를 사용하려고했지만, 사업부의 배경 이미지 속성이 설정되지 않습니다).

Here's a JSFiddle of what I am trying to do. 이미지는 콘텐츠 div의 가운데에 배치하고 콘텐츠 div 만 메뉴 div와 겹치지 않아야합니다. 이미지의 가로 방향 중심은 과입니다.

출처

2016-06-29 driima

사진은 중앙에 배치 [삭제 주석 당 명백하게 모두 수직 및 수평으로] 메뉴 DIV 중복없이 콘텐츠 DIV에만 콘텐츠 DIV,이다.

html, body { 
 
    width:100%; 
 
    height:100%; 
 
    overflow:hidden; 
 
    margin:0; 
 
    padding: 0; 
 
} 
 

 
#menu { 
 
    height: 64px; 
 
    background-color: red; 
 
} 
 

 
#container { 
 
    height:100%; 
 
    } 
 

 
#content { 
 
    display: flex; 
 
    height:calc(100% - 64px); 
 
    justify-content: center; /* center horizontal */ 
 
    align-items: center; /* center vertical */ 
 
    overflow: hidden; 
 
    background:#c0ffee 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="menu"> 
 
    
 
    </div> 
 
    <div id="content"> 
 
     <img id="snapshot" src="http://www.fillmurray.com/g/200/200" /> 
 
    </div> 
 
    </div> 
 
    <script src="scripts/window.js"></script> 
 
</body>

출처

2016-06-29 17:17:58

Fiddle 업데이트됩니다 사용할 수있는 인 flexbox을 수행 할 수 있습니다 콘텐츠 div가 나머지를 채우도록하십시오. 공간이 웹 페이지에 있으므로 크기를 조정할 때도 이미지가 항상 가운데에 배치됩니다. – driima

그래, 전체 페이지 크기로 데모를 확인하십시오. –

감사합니다. 그건 놀랍게도 잘 작동합니다. – driima

는 인라인 요소의 경우는 다음 방법으로이 있습니까 text-align: center. 다음

가

출처

2016-06-29 17:18:24 DottedT

절대 위치 지정없이 div 안에 이미지 가운데 놓기

답변

관련 문제