使用 Masonry，如何使元素居中？

Question

这是我的 HTML，

<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>

这是我的 CSS

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

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

如何让 LI 在 UL 容器内居中？谢谢

Answer 1

Masonry 不会将宽度为百分比的元素居中。为此，我尝试使用以下解决方法并且效果很好：

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/)

Answer 2

你可以使用 padding 来居中，就像你有一个宽度为 100px 的盒子，并且你希望所有的文本都在盒子里居中，你可以使用 padding-left:20px;填充右：20px；或使用 text-align:center;