센터 이미지 Y 및 X는

어떻게 이미지를 중심 것인가?

#box 
{ 
border: 1px solid; 
margin: 0px 10px 0px 0px; 
width: 250px; 
height: 200px; 
border-radius: 35px; 
-webkit-border-radius: 35px; 
-moz-border-radius: 35px; 
border: 1px solid #E8E8E8; 
display:inline-block; 
} 

<div id="box"> 
<img src="cleaning1.jpg" height="150px" width="200px"> 
</div>

출처

2014-03-02 user3354493

크기가 미지 인 이미지를 세로 및 가로 가운데에 정렬하려면 [내 대답은 여기에서]를 참조하십시오 (http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a- div-with-responsive-height/18516474 # 18516474). –

이미지 크기가 변경됩니까? –

@HashemQolami 나는 피곤했지만 일할 수 없었다. – user3354493

이미지의 기본 표시 유형을 inline-block으로 변경하고 inline-block 옆에 전체 높이 의사 요소를 생성 할 수 있습니다.

인라인 요소를 세로로 vertical-align: middle;만큼 정렬하고 #box에 text-align: center;을 사용하여 이미지를 가운데로 가져옵니다.

또한 인라인 (-block) 요소 사이에 공백 문자가 있으므로 제거해야합니다. 당신은 my answer을 참조 할 수 있습니다. 여기

당신은 이동 :

#box { 
    /* Other styles here... */ 

    text-align: center; /* align the inline(-block) elements horizontally */ 
    font: 0/0 a;   /* remove the gap between inline(-block) elements */ 
} 

#box:after {   /* create a full-height inline block pseudo=element */ 
    content: ' '; 
    display: inline-block; 
    vertical-align: middle; /* vertical alignment of the inline element */ 
    height: 100%; 
} 

#box img { 
    display: inline-block; 
    vertical-align: middle; /* vertical alignment of the inline element */ 
}

WORKING DEMO

더 자세한 내용은 my answer here를 참조 할 수 있습니다.

출처

2014-03-02 09:16:32

고마워. 나는 그렇게하지 않았기 때문에 그렇게하지 않았다. – user3354493

Hashem, 내 txt가 상자 div에없는 이유는 무엇입니까? 내 계획은 이미지를 중심에두고 그 위에 쓰는 것이 었습니다. 그러나 내가 그것을 넣으면 텍스트가 나타나지 않습니다. – user3354493

그게 원한다면 텍스트가 위에 떠있는 것처럼 내 솔루션을 사용하십시오. 그것은 불필요한 요소와 CSS 코드를 추가하는 것보다 문제를 해결하는 훨씬 더 좋은 방법입니다. 실제로는 필요하지 않습니다. – LGSon

것은 하솀 제안, 또는 전용 상자에 중심 이미지가에,이 작업을 수행 할 경우 :

데모 : http://jsfiddle.net/J7xha/1/

HTML

<div id="box"> 
</div>

CSS

#box { 
    background: transparent url("http://placehold.it/240x190") no-repeat center center; 
    border: 1px solid; 
    margin: 0px 10px 0px 0px; 
    width: 250px; 
    height: 200px; 
    border-radius: 35px; 
    -webkit-border-radius: 35px; 
    -moz-border-radius: 35px; 
    border: 1px solid #E8E8E8; 
    display:inline-block; 
}

출처

2014-03-02 09:15:51 LGSon

센터 이미지 Y 및 X는

답변

관련 문제