프런트 엔드 도움이 필요합니다

Question

이것이 적합하지 않은 경우, 내가하지 않을 것이지만 내 프런트 엔드 중 일부를 수행하는 데 도움이 필요합니다. 기본적으로 나는 필요한 모든 데이터를 처리하는 div 및 child div가 있습니다. 그 자식 div는 너비가 있으며 특정 지점에 도달 할 때까지 제대로 작동합니다 (화면 너비를 최소화하면 내가 말하는 것을 볼 수 있습니다). 아이템을 가지고있는 div가 항상 중앙에 위치하도록하려면 어떻게해야합니까? 또한, 나는 이것이 반응하는 감각으로 요구하고 있습니다.

파트 2) 버튼을 항상 중간에 배치 할 수 있도록하려면 어떻게해야합니까? (이전 버튼을 사용할 계획이므로)

이렇게 도움이된다면 트위터 부트 스트랩을 사용하고 있습니다! (나는 많은 것을 시도해 봤지만 성공하지 못했고 'pull-right'및 'pull-left'클래스를 우위로 활용하려했지만, 운이 좋지 않은 스팬 클래스를 사용해 보았습니다.) Live demo

코드 : 나는 무엇을보고에서

<h2 class="text-center">Our Products</h2> 
       <form method="post"> 

        <div class="container" style="width: 100%;"> 

         <button class="btn btn-success" type="submit" name="next"> Next </button> 
         <ul style="list-style-type: none; width: 70%; margin-left: auto; margin-right: auto; float: none; "> 
          @{ 
           x = getPageNum * 6; 
          } 
          <div class="container" style="margin-left: auto; margin-right: auto; float: none; "> 
           @for (int i = x; i < @itemsPerPage; i++) 
           { 
            <li style="display: inline-block;"> 
             <div class="container"> 

              <img src="~/Content/Images_fixed/@(Model[i].link).scale_20.jpg" width=" 190" height="130" /> 
              <p> 
               @Html.DisplayFor(m => m[i].title) 
              </p> 
              <p> 
               @Html.DisplayFor(m => m[i].price) 
              </p> 
             </div> 
            </li> 
           } 
          </div> 


         </ul> 
        </div> 
       </form> 

Answer 1

이 요소를 포함하는 사업부가 중간에 중심에 있다는 것입니다, 당신의 문제는 요소 자체가 그 사업부의 내부 중앙에 있지이다. 당신이 할 수있는 것은 그림과 단추를 모두 잡고있는 용기를주는 것입니다. Text-align : center;

.container { 
    text-align: center; 
} 

사진과 버튼의 중앙에 위치합니다. 그런 다음 버튼을 오른쪽으로 약간 이동하려면 약간의 여백을 둡니다.

button { 
    margin-left: 150px; 
}