2013-05-10 2 views
-3

웹 페이지의 크기를 조정할 때 여러 개의 이미지가 있습니다. 그러나 div 블록을 중앙에 유지해야합니다. 그들은 현재 모두 중심되는 :왼쪽 중앙에 div 이미지 블록을 정렬하려고 시도합니다.

은 아래를 참조하십시오 :

<div class="widget-content" style="text-align:center;"> 
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg"> 
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg"> 
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg"> 
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg"> 
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg"> 
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg"> 
    <img class="medium_thumb_rounded" id="15" src="my-img-src.jpg"> 
</div> 

CSS : 여기

enter image description here

내 HTML과 CSS 코드

.widget-content { 
    padding: 12px 15px; 
    border-bottom: 1px solid #cdcdcd; 
} 

.medium_thumb_rounded { 

    border: 1px solid #B6BCBF; 
    /*float: left;*/ 
    height: 80px; 
    width: 80px; 
    margin-right: 1px; 
    margin-bottom: 5px; 

    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
     border-radius: 3px; 
} 

어떤 생각이 무엇을 내가 잘못하고있어?

<div class="widget-content" style="text-align:center;"> 

중심 텍스트 정렬을 제거

+2

당신은 어디에서 왼쪽 정렬을 알 수 있습니까? – PeeHaa

+0

원하는 결과가 무엇입니까? –

+0

'.widget-content {text-align : left; }' – Orangepill

답변

0

귀하의 문제는이 라인입니다.

margin:auto;

그것은 사업부를 중심으로하지만, 사업부 내부 무엇에 영향을주지 않습니다 : text-align:left;

0

변경 text-align:center;.widget-content이 추가 사업부를 중심으로 시도를 계속합니다. 이 변경 사항을 다른 사람들의 답변과 함께 사용하십시오. text-align:center ~ text-align:left

0

에 대한

0

당신이 찾고있는 행동을 얻으려면 DIV가 최대 너비가 필요합니다. 당신의 DIV에

http://jsfiddle.net/cswbr/

style="text-align:center;" 

, 추가

margin:0 auto; 
max-width:###px; 
관련 문제