Question

我正在使用bootstrap并且有一个div是“col-md-8 col-md-offset-2”，它位于页面的中心。使用php我在while循环中从数据库加载图像（电影海报），直到所有图像都被加载。我把它们漂浮起来并给它们所有的余量将它们分开一点，然后它们加载到多条线上。在它们上方是一个居中的h2（流派）。如何为每条线水平居中图像？此刻它们与div的左边对齐。我尝试了各种各样的事情来集中他们，但没有一个会产生任何影响。

这是代码。

<div class="col-xs-8 col-xs-offset-2" id="genrecontent">
    <?php
        //get the genre name
        $genres = $db->query('SELECT name FROM genre WHERE id = '.($_GET['id']));
        $genre = $genres->fetch_object('genre');
    ?>
    <h2><?=$genre->name?></h2>
    <br/>
    <?php
        // get the films from the genre we are dealing with
        // ensuring we escape the GET string
        $films = $db->query('SELECT * FROM film WHERE genre_id = '.$db->real_escape_string($_GET['id']));
        while($film = $films->fetch_object('film')):
    ?>
    <a href="films.php?id=<?=$film->id?>">
        <img src="http://comp2203.ecs.soton.ac.uk/coursework/1415/assets/posters/<?=$film->id?>_medium.jpg" alt="film poster"/>
    </a>
    <?php
        endwhile;
    ?>
</div>

这是CSS

#genrecontent h2{
    text-align: center;
}

#genrecontent a{
    float: left;
}

#genrecontent img{
    width: 200px;
    height: 300px;
    margin: 15px;
}

我意识到通常我可以设置div的宽度和图像的宽度以及它们的边距以实现完美的间距，但div会根据浏览器大小相应地改变尺寸，因此我需要找到一种方法漂浮和居中。

Answer 1

我第一次误解了你的问题。要在一行上对齐多个图像，要将图像的显示设置为内联块，然后将父项设置为text-align：center。

我做了一个应该有帮助的小提琴但你的css看起来像这样：

 $routeProvider
   .when('/Book/:bookId', {
    templateUrl: 'book.html',
    controller: 'BookController',
    resolve: {        
    }
  })

https://jsfiddle.net/bxurz66w/

如何将多个图像居中放置在多条线上？

1 个答案: