부트 스트랩 열 내에서 이미지의 중심을 어떻게

Question

이 같은 부트 스트랩 컬럼 내에서 여러 이미지가 각 열은 또한 services-section의 클래스를 제공하고있다 당신이 볼 수 있듯이

<div class="services"> 
    <div class="container">  
     <div class="row"> 

      <div class="col-md-3 services-section"> 
       <img src="/images/website_design_icon.png"/> 
        <div class="services-paragraph"> 
        <h3>Website Design</h3> 
        <p>WordPress themes built for design and functionality</p> 
        </div> 
      </div> 

      <div class="col-md-3 services-section"> 
       <img src="/images/graphic_design_icon.png"/> 
        <div class="services-paragraph"> 
        <h3>Graphic Design</h3> 
        <p>Logo designs for identity and print</p> 
       </div> 
      </div> 

      <div class="col-md-3 services-section"> 
       <img src="/images/search_engine_marketing_icon.png"/> 
        <div class="services-paragraph"> 
        <h3>Search Engine Marketing</h3> 
        <p>SEO strategies and PPC solutions to increase your presence online</p> 
       </div> 
      </div> 

      <div class="col-md-3 services-section"> 
       <img src="/images/wordpress_conversion_icon.png"/> 
        <div class="services-paragraph"> 
        <h3>WordPress Conversion</h3> 
        <p>Take advantage of the number-one CMS in Web Design to liberate your business</p> 
        </div> 
      </div> 

     </div><!--/Row--> 
    </div><!--/Container--> 
    </div><!--/Services--> 

합니다. 나는이 같은 CSS에서 .services-section img 스타일했습니다

CSS :

.services-section img { 
text-align: center; 
width: 90px; 
height: 90px; 
} 

그리고이 클래스에 다양한 스타일을 추가 해봤 - float:none;이 margin:auto;는, vertical-align:middle;이 - 그들 중 누구도 어떤 영향을 미치지 않았다있다. 나는 또한 이미지를 클래스를 제공하려고 - .middle을하고 CSS에서

.middle { 
text-align: center; 
} 

을하고 있지만 그 또한 영향을 미치지 아니합니다.

나는 margin-left: 30px;을 사용하고 싶지 않지만 이미지를 열의 중심으로 밀어 넣을 다른 방법을 모르겠습니다. 다른 제안을 주셔서 감사합니다이 사이트는 여기에 라이브입니다 :

http://nowordpress.gatewaywebdesign.com/

Answer 1

추가 display: block 및 margin: auto; 그 트릭을 할 것입니다

.services-section img { 
    width: 90px; 
    height: 90px; 
    margin: auto;  
    display: block; 
} 

Answer 2

설정 만과 같이 .services 섹션에 텍스트 - 정렬 :

.services-section { 
    text-align: center; 
} 

CodePen Example here