div를 중앙 집중식으로 맞 춥니 다.

-1

반응 형 디자인을 개발하기 위해 트위터 부트 스트랩을 사용하고 있습니다. 나는 div 안에 두 개의 div을 가지고 있습니다. 중앙 집중식으로 정렬하려면 어떻게해야합니까? 나는 중심에 맞추기 위해 패딩을 주지만, 모바일 레이아웃에서는 패딩 때문에 중앙으로 정렬되지 않으므로 패딩을 제거했습니다. 같은 "행"에서 하나 이상의 안감없이 사업부를 중심으로해야하는 경우, 당신은 CSS를 사용할 필요가 일반적으로div를 중앙 집중식으로 맞 춥니 다.

http://jsfiddle.net/NsmtF/3/embedded/result/

<div class="row features"> 
    <div class="span6">   
    <h3>Industry Operation Packages</h3> 
    <p>eCommerce, Sales and Customer Management, Purchasing and Vendor Management, Inventory Management, Build of Materials, Real-Time Production, Product Life Cycle, QA Management.</p> 
    </div> 
    <div class="span6"> 
    <h3>Customer Relationship Management</h3> 
    <p>Client Real-Time Access to Accounting, Quote Management, Order Status, Production, Inventory, Shipping and complete RMA Process - Status, Product Failure Analysis and Statistic.</p> 
    </div> 
</div>

출처

2013-03-05 user2044139

, ...

margin:auto

을 사용하면 공간에 배치 할 수 있습니다. 그것은 당신이 중심으로 원하는 div에 놓을 너비가 필요했습니다.

출처

2013-03-05 00:12:56 niaccurshi

이 작업을 수행하려면 options이 필요합니다. 하나는 테이블처럼 표시 할 div을 설정하는 것입니다, 그래서 당신은 (다른 요소를 매우 다르게 작동) 테이블의 수직 정렬 속성을 사용할 수 있습니다 : 당신은 또한 절대적으로, div 위치를 사용할 수

<div id="wrapper"> 
    <div id="cell"> 
     <div class="content"> 
      Content goes here 
     </div> 
    </div> 
</div> 

#wrapper {display:table;} 
#cell {display:table-cell; vertical-align:middle;}

을하는 상단이 50 %로 설정되고 상단 여백은 콘텐츠 높이의 절반 음수로 설정됩니다. 즉, 객체는 고정 된 높이 (CSS로 정의 됨)를 가져야합니다. 이것은 귀하의 경우 작동하지 않습니다

<div id="content"> 
    Content Here   
</div> 

#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}

방법 3은 콘텐츠 요소 위의 사업부를 삽입하는 것입니다. 높이 : 50 %로 설정됩니다. 및 margin-bottom : -contentheight; 내용은 다음 플로트를 지우고 중간에 종료됩니다 : 당신은 단지 텍스트의 한 라인을 가지고 있다면 (사업부가 50 픽셀을 것 행 높이 50pc 경우), 당신은 line-height;을 사용할 수

<div id="floater"> 
<div id="content"> 
    Content here 
</div> 
</div> 

#floater {float:left; height:50%; margin-bottom:-120px;} 
#content {clear:both; height:240px; position:relative;}

두 개 이상의 요소가있는 경우 언급 한대로 패딩을 사용할 수도 있습니다. 하지만 반응이 뛰어난 디자인이기 때문에 해상도에 따라 다른 패딩을 지정해야합니다. 이를 수행하는 방법은 @media queries을 사용하는 것입니다.

출처

2013-03-05 00:18:17 Yisela

다른 의견 이외에 기본 페이지 레이아웃을 단순화하고이를 먼저 검증하는 것이 좋습니다. 그리드 레이아웃과 관련된 몇 가지 근본적인 문제점을 볼 수 있으며 또한주의가 필요합니다.

예를 들어 CSS 스타일 중 일부에서 이상한 상황이 발생하여 span6의 너비가 덮어 쓰여 지므로 부트 스트랩 설정이 적용되지 않습니다.

section.features .span6, section .features .span6 { 
width: 300px; 
text-align: center; 
}

또한 제품/솔루션/서비스에는 총 3 x 6의 스팬이있어 어느 것도 도움이되지 않습니다.

행운을 빈다.

출처

2013-03-05 00:51:36

이해하려고하는데, 대답은

여백 : 0입니다.

0은 상단 및 하단에 패딩이 없으며 자동으로 왼쪽 및 오른쪽 가운데에 맞 춥니 다. 너비가있는 div에만 적용 할 수 있습니다.예를

<div id="container"> 
    <div id="toCenter"> 

    </div> 
</div>

에 대한 귀하의 CSS는 중간에 toCenter의 사업부를 정렬 할

#container{ 
width:100%; 
} 

#toCenter{ 
width: 500px; 
margin:0 auto; 
}

과 같을 것이다. 희망은 그 말이 맞습니다. 처음 여기에 게시! 하하

출처

2013-03-05 01:49:49

div를 중앙 집중식으로 맞 춥니 다.

답변

관련 문제