행 내부에 div를 가운데에 놓는 방법

부모로부터 상속 된 너비가 1172px 인 행이 있습니다. 나는 그 줄 안쪽에 div를 선언했고 나는 그것의 중심을 정렬하고 싶다. 나는 작동하지 않는 margin: 0 auto과 text-align:center을 적용 해 보았습니다. 나는 그것을 중심에 두는가?행 내부에 div를 가운데에 놓는 방법

<div class="row"> 
    <div id="YelloBox" class="YelloBox"> 
    </div>      
</div>

CSS :

.YelloBox { 
    width: 515px; 
    height: 602px; 
    opacity: 0.3; 
    background-color: #ffffff; 
    background-color: var(--white); 
    border: solid 1px #a28c77; 
    border: solid 1px var(--reddish-grey); 
    text-align: center; 
    margin: 0 auto; 
}

출처

2016-08-31 Satyadev

그냥 CSS를

.YelloBox { 
 
    width: 515px; 
 
    height: 602px; 
 
    opacity: 0.3; 
 
    background-color: #ffffff; 
 
    background-color: var(--white); 
 
    border: solid 1px #a28c77; 
 
    border: solid 1px var(--reddish-grey); 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    display: table; 
 
}

출처

2016-08-31 08:34:50

개념을 이해할 수 있도록 왜 저에게 효과가 없었는지 몇 가지 정보를 제공해 주시겠습니까? 감사합니다 – Satyadev

'text-align : center'는 텍스트 요소를 정렬하는 데 사용됩니다 .. div 요소가 아닙니다. div 요소에 div 요소를 지정했다면, 요소 내에서 텍스트가 정렬됩니다. –

아니요. 왜 'display : table worked'가 아니라'marin : 0 auto'가 아닌지를 의미합니다. – Satyadev

에 display:table 추가

나는 이것이 정렬을 완전히 이해하는 데 필요한 모든 것이라고 생각합니다. 데모를 통해 좋은 결과를 얻으십시오.

http://www.w3schools.com/cssref/css3_pr_flex.asp

플렉스 또한, 을 같은 일을하지만 일부 브라우저에서 실패 할 수 있기 때문에 부동산에 대한에게 지원 페이지를 읽을 수 있습니다.

http://caniuse.com/#search=flex

출처

2016-08-31 08:41:33

그냥 center-block 클래스를 사용합니다.

<div class="row"> 
    <div id="YelloBox" class="YelloBox center-block"></div> 
</div>

자세한 내용은 here을 참조하십시오.

출처

2016-08-31 08:47:38

행 내부에 div를 가운데에 놓는 방법

답변

관련 문제