如何使浮动在多条线上的多个图像居中？

Posted 2023-03-29

【中文标题】如何使浮动在多条线上的多个图像居中？

【英文标题】：How can I centre multiple images that are floated across more than one line?

【发布时间】：2015-08-26 05:13:25

【问题描述】：

我正在使用引导程序并且有一个 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" />
    </a>
    <?php
        endwhile;
    ?>
</div>

这里是 CSS

#genrecontent h2
    text-align: center;


#genrecontent a
    float: left;


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

我意识到通常我可以设置 div 的宽度和图像的宽度以及它们的边距以形成完美的间距，但是 div 会根据浏览器的大小响应地改变大小，所以我需要想办法浮动并居中。

【问题讨论】：

您可以尝试 - 删除 float:left 并添加 #genrecontent text-align:center; 如果可以，请发布您的输出 html 并创建一个简单的演示。

谢谢，这行得通。我不知道为什么我没有想到这个，就是这么简单。我想我太专注于需要浮动了。

好吧，我把它作为一个答案发布，如果你想接受它可以关闭它，对不起你自己的答案的负面cmets。

【参考方案1】：

我第一次误解了你的问题。要在一行上对齐多个图像，您需要将图像的显示设置为 inline-block，然后将父级设置为 text-align: center。

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

img 
    width: 100px;

li 
    display: inline-block;

ul 
    list-style: none;
    text-align: center;

https://jsfiddle.net/bxurz66w/