संरेखित तत्वों

Question

आदेश में एक पैनल शीर्ष मैं इस कोशिश की में 3 तत्व करने के लिए:

<div class="panel panel-primary"> 
      <!-- Default panel header contents --> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <div class="pull-left"> 
         <h4 class="panel-title"> <i class="glyphicon glyphicon-user"></i> 
          Users 
         </h4> 
        </div> 
        <div class="header-center"> 
         <pagination class="panel-title" ng-show="totalItems > pageParameters.size" items-per-page="pageParameters.size" boundary-links="true" total-items="totalItems" ng-model="currentPage" ng-change="changePage()" 
            previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination> 
        </div> 
        <div class="pull-right"> 
         <span class="panel-title btn-group"> 
          <button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm" ng-click="addUser()"> 
           <span class="glyphicon glyphicon-plus text-primary"></span> 
           <span class="text-primary"><strong>Add</strong></span> 
          </button> 
         </span> 
        </div> 
       </h4> 
       <div class="clearfix"></div> 
      </div> 
</div> 

और .less फ़ाइल इसी:

.header-center { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    } 

लेकिन इस renders:

मुझे अन्य तत्वों के साथ गठबंधन करने के लिए जोड़ें बटन की आवश्यकता है ..

Answer 1

आप अधिक स्पष्टीकरण के लिए कोड की जाँच करें इस समस्या को हल करने के लिए बूटस्ट्रैप ग्रिड का उपयोग कर सकते आप कॉल-XS-3, कॉल-XS-6, कॉल-XS-3 का उपयोग 3 समानांतर कॉलम बनाने के लिए कर सकते हैं http://jsfiddle.net/5doxw0ea/

HTML:

<div class="container"> 

    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <div class="container-fluid panel-container"> 
       <div class="col-xs-3 text-left"> 
        <h4 class="panel-title abc"> 
         <i class="glyphicon glyphicon-user"></i> 
         Users 
        </h4> 
       </div> 
       <div class="col-xs-6 text-center "> 
        <ul class="pagination panel-pagination"> 
         <li> 
          <a href="#" aria-label="Previous"> 
         <span aria-hidden="true">&laquo;</span> 
          </a> 
         </li> 
         <li><a href="#">1</a></li> 
         <li><a href="#">2</a></li> 
         <li><a href="#">3</a></li> 
         <li> 
          <a href="#" aria-label="Next"> 
         <span aria-hidden="true">&raquo;</span> 
          </a> 
         </li> 
         </ul> 
       </div> 
       <div class="col-xs-3 text-right"> 
        <span class="panel-title btn-group"> 
         <button ng-disabled="underCreation" type="button" class="btn btn-default btn-sm abc" ng-click="addUser()"> 
          <span class="glyphicon glyphicon-plus text-primary"></span> 
          <span class="text-primary"><strong>Add</strong></span> 
         </button> 
        </span> 
       </div>   
      </div>   
     </div> 
    </div> 
</div> 

सीएसएस:

.panel-pagination { 
    margin: 0 0 !important; 
} 
.panel-container { 
    padding-right: 0 !important; 
    padding-left: 0 !important; 
    height:35px; 
} 
.abc{ 
    height:35px; 
     display:table-cell !important; 
     vertical-align:middle; 
} 

Answer 2

आप, साथ ही तीसरे div pull-right सेकंड ऊपर चल सकता ऑनड div header-center यदि आपको वहां पूर्ण ग्रिड की आवश्यकता नहीं है।