중앙 이미지(가로로 div)

중앙 이미지(가로로 div)

이 질문에는 이미 다음과 같은 답변이 있습니다.

텍스트 정렬 중심을 사용한 중심 이미지? (28개 답변)

닫힘7년 전에.

저는.img디브(div)로class="top_image"이 이미지가 디브의 한 가운데에 있기를 바라지만, 내가 시도하는 것은 아무것도 안 돼요.

도와주셔서 감사합니다!

여기에 게시된 모든 솔루션은 일반적인 시나리오가 아닌 의 치수를 알고 있다고 가정합니다.또한 용액에 치수를 심는 것은 고통스럽습니다.

간단히 설정:

/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;

아니면

/* for the img inside your div */
display: block;
margin: 0 auto;

그게 전부입니다.

참고로 이니셜도 설정해야 합니다.min-width당신의 바깥쪽을 위하여div.

text-align: center(중심)는 수평 중심에만 적용됩니다.완전한 중심, 수직 및 수평에 위치하기 위해 다음 작업을 수행할 수 있습니다.

div
{
    position: relative;
}
div img
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: [-50% of your image's width];
    margin-top: [-50% of your image's height];
}

W3C는 이에 대한 매우 간단하고 우아한 솔루션을 제공합니다.다음과 같이 margin:0 auto declaration을 사용하면 됩니다.

.top_image img { margin:0 auto; }

W3C의 더 많은 정보와 예.

<div class="outer">
    <div class="inner">
        <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
    </div>
</div>
<hr />
<div class="outer">
    <div class="inner">
        <img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
    </div>
</div>

CSS

img
{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
}

.outer
{
    border: 1px solid #888;
    width: 100px;
    height: 100px;
}

.inner
{
    display:table-cell;
    height: 100px;
    width: 100px;
    vertical-align: middle;
}

디브는 텍스트 정렬 센터를 하고 키는 이미지로 관리하는 게 좋을 것 같아요.div가 이미지와 div 사이에 공백을 가지도록 상단과 하단 패딩을 지정합니다.이 예를 보세요: http://jsfiddle.net/Tv9mG/

이것이 도움이 되기를 바랍니다.

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

이걸 알아내는데 시간이 너무 많이 걸렸습니다.아무도 센터 태그를 언급하지 않았다니 믿을 수가 없네요.

예:

<center><img src = "yourimage.png"/></center>

이미지 크기를 백분율로 조정하려면 다음을 수행합니다.

<center><img src = "yourimage.png" width = "75%"/></center>

GG 아메리카

언급URL : https://stackoverflow.com/questions/9980531/center-image-in-div-horizontally