어떻게 부트 스트랩에 행을 센터링합니까?

Question

'Heired Safely & 빨리'및 'Staffing Agencies'라는 제목의 열을 가운데에 배치하는 방법을 알아야합니다. 미완성이므로 사이트의 나머지 부분은 무시하십시오. 코드 dev에 웹 사이트 링크는 여기에, 다음과 같습니다 : 당신이 CSS에 익숙하지 않은 경우 http://staging.liberationmedical.com/new-design/

<div class="container-fluid firstcontainer" style="margin-top: 150px;"> 
 
    <div class="row row-centered"> 
 
     <div class="col-md-6"> 
 
       <h2>Hire Safely &amp; Quickly</h2> 
 
       <p class="icon-text1">Only credentialed professionals can use Liberation<br>Medical. As a member, you can review profiles, skills<br>and job bids and select candidates; you can hire<br>locum tenens, nurses and other contract medical<br>professionals.</p> 
 
       <p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p> 
 
     </div><!-- col-md-3 --> 
 
     <div class="col-md-6"> 
 
       <h2>No Staffing Agencies</h2> 
 
       <p class="icon-text3">With Liberation Medical, you'll be able to engage<br>directly with contract medical professionals, 
 
avoid<br>staffing agency fees, and evade miscommunication<br>and mis- representation. Post unlimited jobs and<br>have unlimited contracts for free!</p> 
 
       <p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p> 
 
     </div><!-- end col-md-3 -->  
 
    </div><!-- end row --> 
 
</div><!-- end container-fluid -->

Answer 1

당신이 당신의 CSS 파일에서 해당 태그를 편집 할 수 있습니다. 여기보세요 : http://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 2

zurb foundation처럼 부트 스트랩에 센터 클래스가 없습니다. 당신은 전체 col-md-6을 작성하지 않는 콘텐츠의 원인이되므로 페이지를 폭의 잘못된 인식을주고 그것을 <br>에서 줄 바꿈이 당신의 <p> 태그 안에 모든 것이

Answer 3

첫째, 텍스트의 중심을 .md-offset-3를 사용할 수 있습니다. 콘텐츠의 너비에 맞게 열 너비를 찾은 다음 페이지에서 가운데에 맞춰 오프셋합니다. 당신은 할 수 :

<div class="container-fluid firstcontainer" style="margin-top: 150px;"> 
    <div class="row row-centered"> 
    <div class="col-md-3 col-md-offset-3"> 
      <h2>Hire Safely &amp; Quickly</h2> 
      <p class="icon-text1">Only credentialed professionals can use Liberation<br>Medical. As a member, you can review profiles, skills<br>and job bids and select candidates; you can hire<br>locum tenens, nurses and other contract medical<br>professionals.</p> 
      <p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p> 
    </div><!-- col-md-3 --> 
    <div class="col-md-3 col-md-offset-3"> 
      <h2>No Staffing Agencies</h2> 
      <p class="icon-text3">With Liberation Medical, you'll be able to engage<br> directly with contract medical professionals, avoid<br>staffing agency fees, and evade miscommunication<br> and mis-representation. Post unlimited jobs and<br>have unlimited contracts for free! 
    </p> 
    <p class="icon-text4-subtext"> 
    <a class="links" href="#">Sign up for free</a> 
    </p> 
    </div><!-- end col-md-3 -->  
</div><!-- end row --> 

이 페이지의 중심에 가까워도 더 열을 이동해야합니다. 오프셋 및 열 너비를 원하는대로 가져올 수 있습니다. 오프셋을 포함한 총 12 개의 열을 기억하십시오.

내가하는 또 다른 한 가지는 센터라고 불리는 클래스를 만들어 모든 것을 중심에두고 싶은 요소에 그 클래스를 적용 할 수 있도록하는 것입니다. 마찬가지로 :

.center{text-align:center;}