Question

我知道这是一个经常被问到的问题，但我似乎无法为我的具体案例找到合适的答案。

我希望以下代码每行显示2个居中图像。

<!doctype html>

<html>

<head>

    <title>James Woods</title>

    <!-- Sets Viewport for Responsive Design -->
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">

    <!-- Core Bootstrap CSS -->
    <link href = "../css/bootstrap-custom.css" rel ="stylesheet">

    <!-- Custom Site CSS -->
    <link href = "../css/style.css" rel ="stylesheet">

    <!-- Custom Creations CSS -->
    <link href = "create-style.css" rel ="stylesheet">

</head>

<div class="container">

        <div class = "panel panel-info">

            <div class = "panel-heading">
                <h3 style = "text-align: center;">Creations</h3>

                <div class="creations-filter">

                    <a href="#all" data-filter="*" class="current">All Creations</a>
                    <a href="#scratch" data-filter=".scratch">Scratch Games</a>
                    <a href="#games" data-filter=".games">HTML5/Javacript Games</a>
                    <a href="#apps" data-filter=".apps">Web Applications</a>
                    <a href="#other" data-filter=".other">Other</a>

                </div>
            </div>

            <div class = "panel-body center">

             <div class="creations-container">

                <div class="scratch">
                    <img src="../img/440x250.jpg" alt="image">
                </div> 

                <div class="games">
                    <img src="../img/440x250.jpg" alt="image">
                </div> 

                <div class="other">
                    <img src="../img/440x250.jpg" alt="image">
                </div> 

                <div class="games">
                    <img src="../img/440x250.jpg" alt="image">
                </div> 

                <div class="games">
                    <img src="../img/440x250.jpg" alt="image">
                </div> 

                <div class="apps">
                    <img src="../img/440x250.jpg" alt="image">
                </div> 

            </div>

        </div>



    </div> <!-- END container div -->

这是我在页面末尾的jQuery

<!-- Isotope JQuery Plugin -->
    <script src="../js/isotope.js" type="text/javascript"></script> 
    <script src = "../js/bootstrap.js"></script>
    <script type="text/javascript">

    $(window).load(function(){
    var $container = $('.creations-container');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.creations-filter a').click(function(){
        $('.creations-filter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
        }); 
    });

</script>

我的自定义CSS

.creations-filter a { 
margin-right: 10px; 
color:#666;
text-decoration:none;
}

.creations-filter a.current { 
    font-weight:bold;
}

.creations-filter {
    text-align: center;
}

.creations-container {

}
img {
    margin:5px;
}

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

感谢任何试图提供帮助的人：）

P.S添加JSFiddle：http://jsfiddle.net/GwBa8/123/图像应该是450x260 ......

Answer 1

我在这里做了一些你可能喜欢的调整。除非您还需要单个图像居中。

.panel-body {
    width: 920px;
    margin:auto;
}

http://jsfiddle.net/ergec/GwBa8/125/

Bootstrap 3和Isotope jQuery图像居中

1 个答案: