왼쪽 가운데에있는 div의 내용을 정렬하는 방법은 무엇입니까?

Question

다른 div 안에 div가 가운데에 배치되었지만 가운데에있는 div의 내용을 왼쪽 정렬하려고합니다. 어떻게해야합니까?

나의 현재 HTML은 다음과 같습니다

<div style="border: solid 1px #ff0000;text-align:center;">  
    <div style="border:solid 1px #00ff00;"> 
     <img src="/some_url_1/" style="width: 80px; height 80px; border: 0"/> 
     <img src="/some_url_2/" style="width: 80px; height 80px; border: 0"/> 
    </div> 
</div> 

현재 이미지가 내부 사업부 내부에 집중되어 있지만, 나는 그들을 중심으로 내부 사업부의 내부 왼쪽으로 정렬하고 싶습니다.

내가 무엇을 놓치고 있는지 알 수 있습니까?

Answer 1

사용 마진이 내부 요소의 중심을 :

#inner { 
    width: 75%; 
    margin: 0 auto; 
    text-align: left; /* generally don't need to explicitly state this */ 
} 

데모 : http://jsfiddle.net/W95Qy/

친숙한 제안으로 CSS를 HTML 밖으로 유지하는 것이 좋습니다. 일반적으로이 코드는 코드를 읽고, 관리하고,이 필드에서 작업 할 때 장기간의 온전함을 유지하기 쉽게 해줍니다.)

Answer 2

이 같은 내부 DIV에 text-align: left를 사용하여이 작업을 수행 할 수 있습니다 다음과 같은 CSS와

<div id="outer"> 
    <div id="inner"> 
     Things to align to the left 
    </div> 
</div> 

:

<div style="border: solid 1px #ff0000; text-align: center;">  
    <div style="border:solid 1px #00ff00; text-align: left;"> 
     <img src="/some_url_1/" style="width: 80px; height 80px; border: 0"/> 
     <img src="/some_url_2/" style="width: 80px; height 80px; border: 0"/> 
    </div> 
</div>