1. 홈
  2. 질의 응답
  3. 기사 목록에 이미지를 수직으로 배치하는 방법은 무엇입니까?

기사 목록에 이미지를 수직으로 배치하는 방법은 무엇입니까?

2017-01-15 1 views

답변

0 
.tutorial { 
    background-color: #ccc; 
    position: relative; 
    img { 
     position: absolute; 
     display: inline-block; 
     width: 50px; 
     height: 50px; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: auto 0; 
    } 
...

The

top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto 0;

은 수직으로 가운데에 맞춰주는 요소입니다.

.tutorial에있는 position: relative;은 img을 수직 중심에 배치하는 이유입니다. 그렇지 않으면 화면에 수직으로 집중됩니다.

출처

2017-01-15 00:14:35

0

당신은에서 img CSS를 변경하여 문제를 해결할 수 있습니다

img { 
     position: absolute; 
     display: inline-block; 
     width: 50px; 
     height: 50px; 
     float: left; 
    }

에 :

img { 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); 
     display: inline-block; 
     width: 50px; 
     height: 50px; 
     float: left; 
    }

이 position: relative, top:50% 및 변환을 추가 : translateY(-50%) 수직 요소를 중심으로하는 매우 효과적인 방법입니다.

출처

2017-01-15 00:22:07 student42

0

JS의 또 다른 솔루션입니다. 

<html> 
    <body> 
     <div class="tutorial" id="tutorial"> 
      <img src="http://www.iconshock.com/img_jpg/BETA/mail_icons/jpg/256/template_icon.jpg" alt="image" id="img"/> 
      <div class="text"> 
       <header> 
        <h1>lorem ipsum</h1> 
        <span> 
         by: who knows? 
        </span> 
       </header> 
       <p> 
        description bla bla bla bla 
       </p> 
      </div> 

     </div> 
    </body> 
</html>

그리고 JS 부분 : 

var tutorialId = document.getElementById("tutorial"); 
var heightTutorial = tutorialId.offsetHeight; 
var imgId = document.getElementById("img"); 
var heightImg = imgId.offsetHeight; 
var margin = (heightTutorial-heightImg); 
imgId.style.marginTop=margin/2+'px';

당신이 나중에 튜토리얼의 높이를 변경하는 경우, 다시 JS를 호출해야합니다.

출처

2017-01-15 00:34:58 Sascha

관련 문제

 관련 문제