벽돌을 사용하여 요소를 가운데에 배치하는 방법?

Question

여기 여기,

<ul id="categories-options" class="js-masonry" 
    data-masonry-options='{ "columnWidth": 225, "itemSelector": ".item", "gutter": 20, "isFitWidth": true, "isAnimated": true }'> 

       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 
       <li class="item"><a href="#">Text Here</a></li> 

      </ul> 

내 HTML이고

#categories-options { 
    list-style-type:none; 
    padding:0; 
    margin: 0 auto;  
} 

#categories-options li{ 
    width:25%; 
} 

가 어떻게 LIS를가 UL 컨테이너 내부에 중심을 얻을 수 있습니다 내 CSS입니까? 감사합니다.

Answer 1

너비가 100px 인 상자가 있고 상자 안의 모든 텍스트를 가운데에 놓기를 원한다면 가운데에 패딩을 사용할 수 있습니다. 패딩 왼쪽 : 20px; 패딩 오른쪽 : 20px; 또는 text-align : center;를 사용하십시오.

Answer 2

벽돌은 너비가 백분율로 가운데에 오지 않습니다. 나는 다음과 같은 해결 방법을 사용하기 위해 시도하고 잘 작동 수행합니다

var $container; 

jQuery(document).ready(function() { 

// The following functions are used to allow us to center an itee list 
// (aligned with the Masonry library) that uses percentage values for list items width 
window.Isotope.prototype._getMasonryGutterColumns = function() { 
    var gutter = this.options.masonry.gutterWidth || 0; 
    containerWidth = this.element.parent().width(); 
    this.masonry.columnWidth = this.options && this.options.masonry.columnWidth 
      || this.$filteredAtoms.outerWidth(true) 
        || containerWidth; 
    this.masonry.columnWidth += gutter; 
    this.masonry.cols = Math.floor((containerWidth + gutter)/this.masonry.columnWidth); 
    this.masonry.cols = Math.max(this.masonry.cols, 1); 
}; 

window.Isotope.prototype._masonryReset = function() { 
    this.masonry = {}; 
    this._getMasonryGutterColumns(); 
    var i = this.masonry.cols; 
    this.masonry.colYs = []; 
    while (i--) { this.masonry.colYs.push(0); } 
}; 

window.Isotope.prototype._masonryResizeChanged = function() { 
    var prevColCount = this.masonry.cols; 
    this._getMasonryGutterColumns(); 
    return (this.masonry.cols !== prevColCount); 
}; 

window.Isotope.prototype._masonryGetContainerSize = function() { 
    var gutter = this.options.masonry.gutterWidth || 0; 
    var unusedCols = 0, 
    i = this.masonry.cols; 
    while (--i) { 
     if (this.masonry.colYs[i] !== 0) { 
     break; 
    } 
    unusedCols++; 
    } 
    return { 
     height : Math.max.apply(Math, this.masonry.colYs), 
     width : ((this.masonry.cols - unusedCols) * this.masonry.columnWidth) - gutter 
    }; 
}; 

// The item list container 
$container = jQuery('.item').parent(); 

// Initialize Masonry 
$container.imagesLoaded(function() { 
    $container.isotope({ 
     masonry: { 
      itemSelector:  '.item', 
      transitionDuration: '.3s' 
          /* Insert your options */ 
     } 
    }); 

    // Bind event listener 
    $container.isotope('on', 'layoutComplete', onLayout); 

    onLayout(); 
}); 
}); 

var timeout; 

/** 
* This callback is called on 'layoutComplete' event 
*/ 
function onLayout() { 

// To prevent to call this function too much times, 
// we need to use a timeout 
if (timeout != undefined) clearTimeout(timeout); 
timeout = setTimeout("centerItems()", 200); 
} 

/** 
* Center the list items 
*/ 
function centerItems(callback) { 

// The reordering has to be repeated for each items list 
jQuery.each(jQuery('.item').parent(), function(key, container) { 

    var items = jQuery(container).children(); 

    // Looking for the rightest item 
    var maxRightIndex = 0; 
    for (var i = 1; i < items.length; i++) { 

     if (jQuery(items[i]).offset().left > jQuery(items[maxRightIndex]).offset().left) { 
      maxRightIndex = i; 
     } 
    } 

    var leftMargin = jQuery(items[0]).offset().left - jQuery(container).offset().left; 
    var rightMargin = jQuery(container).offset().left + jQuery(container).width() - (jQuery(items[maxRightIndex]).offset().left + jQuery(items[maxRightIndex]).width()); 
    var left = (rightMargin - leftMargin)/2; 

    jQuery(container).css('width', 'auto').animate({left: left}); 
}) 
} 

그리고 다음과 같은 CSS 규칙을

html, body { 
overflow-x: hidden; 
} 

참고 : 또한 동위 원소 라이브러리를 포함해야합니다 (http://isotope.metafizzy.co/)