PureCSS를 사용하여 격자 폭 내에서 객체 중앙에 배치

Question

나는 PureCSS가 통합 된 html 템플릿을 가지고있어서 레이아웃 생성을 시작할 수 있습니다. 나는 24 분할 격자의 20-24 너비 인 물체를 가지고 있습니다. 내가있는 그리드 블록 안의 폼이 있습니다. 그리드 안에 폼 컨텐트를 집중시키고 싶습니다. 효과적인 방법으로 그렇게하는 방법을 모르겠습니다. 나는 순수한 CSS 기본값을 무시하기 위해 내 자신의 CSS를 추가하려고했지만 아무도 나를 도울 cna 작동하지 않습니다. 여기

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

    <div class="pure-g"> 
    <div class="pure-u-lg-20-24 center-item-h"> 
     <form action="{% url 'searched' %}" method="POST"> 
     {% csrf_token %} 
     <input type="text" name="searched" placeholder="Search"> 
     </form> 
    </div> 
    </div> 

내가 수동으로 블록 형태의 중심을 사용하려는 CSS입니다 :이 내가 HTML 템플릿이 무엇을 여기

.center-item-h { 
    margin-left: auto !important; 
    margin-right: auto !important; 
} 

이 같은 모습입니다 :

문제의 블록이 아닌 다른 모든 코드를 제거했습니다. 이 대답을 해결하는 데 필요한 경우 모든 내용을 추가 할 수 있습니다.

Answer 1

가로로 가운데 여백을 사용하려면 width을 요소로 설정해야합니다. 그렇지 않으면 자신의 간격을 결정하는 방법을 알 수 없습니다.

.center-item-h { 
    margin: 0 auto; 
    width: 50%; /* just an arbitrary amount */ 
} 

또는 (당신이 할 수있는 경우), flexbox로 전환하고 단지 그 '부모 수평 정렬 속성을 적용

.pure-g { 
    display: flex; 
    justify-content: center; 
}