html - How can I centre multiple images that are floated across more than one line? -
i using bootstrap , have div "col-md-8 col-md-offset-2" in centre of page. using php loading images (film posters) database in while loop until images loaded. have floated them , given them margins space them out little, , load on multiple lines. above them centred h2 (the genre). how horizontally centre images each line? @ moment align left of div. have tried combination of things centre them none have affect.
here code.
<div class="col-xs-8 col-xs-offset-2" id="genrecontent"> <?php //get genre name $genres = $db->query('select name genre id = '.($_get['id'])); $genre = $genres->fetch_object('genre'); ?> <h2><?=$genre->name?></h2> <br/> <?php // films genre dealing // ensuring escape string $films = $db->query('select * film 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> and here css
#genrecontent h2{ text-align: center; } #genrecontent a{ float: left; } #genrecontent img{ width: 200px; height: 300px; margin: 15px; } i realise set width of div , widths of images , margins make perfect spacing out div changes size responsively corresponding browser size , need work out way float , centre them.
i misunderstood question first time around. align multiple images on line want set display of images inline-block , set parent text-align: center.
i made fiddle should css this:
img { width: 100px; } li { display: inline-block; } ul { list-style: none; text-align: center; }
Comments
Post a Comment