큰 div 내에 두 div를 가운데에 배치하는 방법은 무엇입니까?

Question

두 개의 div (#about 및 #testimonial-snippets)를 큰 검은 색 div 안에 가운데 놓으려고합니다. 어떻게해야합니까?

JS 바이올린 : http://jsfiddle.net/DgtqM/

HTML

<footer> 
     <div id="footer-section"> 
      <section id="about"> 
       <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a> 
       <p>Lorem ipsum dolor sit amet. Find him on <a href="http://twitter.com" target="_blank">Twitter</a> and <a href="http://instagram.com" target="_blank">Instagram</a>. <a id="slide-toggle" href="#">Contact</a> | <a href="">Archive</a></p> 
      </section> 
      <section id="testimonial-snippets"> 
       <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a> 
       <div class="snippet"> 
        <p>This is a testimonial.</p> 
        <a class="read-testimonial" href="/testimonials">read more</a> 
       </div> 
      </section> 
     </div> 
</footer> 

CSS 새로운 사업부 내의 요소

footer { 
background: #222; 
clear: both; 
color: #f4f3f1; 
float: left; 
padding: 50px 0; 
width: 100%; 
} 
#footer-section { 
margin: 0 auto; 
overflow: hidden; 
position: relative; 
width: 940px; 
} 
footer section { 
float: left; 
width: 300px; 
} 
#about { 
margin-right: 20px; 
} 
footer a { 
border-bottom: 1px dotted #f4f3f1; 
color: #f4f3f1; 
} 
.profile-photo { 
border: 1px solid #f4f3f1; 
float: left; 
margin: 4px 10px 10px 0; 
} 
p { 
margin: 0 0 1em; 
} 

Answer 1

랩. 그런 다음 새 div에 고정 폭을 지정하고 margin: 0px auto을 사용하여 스타일을 지정하십시오.

HTML

<div id="footer-section"> 
    <div class="wrap"> 
    <section id="about"> 
     <!--Content --> 
    </section> 
    <section id="testimonial-snippets"> 
     <!--Content--> 
    </section> 
    </div> 
</div> 

CSS

.wrap{ 
    width: 620px; 
    margin: 0px auto; 
    overflow: auto; 
} 

예http://jsfiddle.net/DgtqM/5/

Answer 2

나 자신이 마크 업의 최소한 그 문제를 줄일 수있었습니다. 다른 모든 것은이 질문과 관련이 없으며 이해하기가 더 어려워집니다.

<footer> 
    <section id="about">About</section> 
    <section id="testimonial-snippets">Testimonial</section> 
</footer> 

하나 개의 솔루션은 다음과 같은 섹션을 inline-block 요소를 만들기 위해 그들을 바닥 글을 중심으로 한 것 :

footer { 
    background: #222; 
    padding: 50px 0; 
    width: 100%; 
    text-align: center; 
} 
footer section { 
    width: 300px; 
    height: 50px; 
    display: inline-block; 
    text-align: left; 
} 
/* Just coloring the different divs */ 
#about { background: red; } 
#testimonial-snippets { background: green; } 

http://jsfiddle.net/DgtqM/6/