CODEWITHSUNDEEP
htmlcss
Yamaha32088
Yamaha32088

Reputation: 4163

Creating evenly spaced images regardless of size

enter image description here

I am making a photo gallery where all the images are pulled from a MySQL database and displayed on the page using echo ('<div class="photo"> <img src="' . $row['name'] . '" /> </div>');. I am trying to get the images to fit inside of a fixed width container and have them all evenly spaced like shown here. I keep having issues with this the images are not evenly spaced vertically. Can someone please help me with this I have included my source.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style1.css">
    </head>

<body>
    <div class="container">
<?php
require 'DB.php';



    try{      
    $stmt ='SELECT * FROM victoria';
    foreach ($conn->query($stmt) as $row)
        {
        echo ('<div class="photo"> <img src="' . $row['name'] . '" /> </div>');
        }
    }  catch (PDOException $e){
        echo 'Connection failed: ' . $e->getMessage();
    }


?>
    </div>

</body>

</html>

CSS

body{
    background-color: #013FF0;
}

.container {
    width: 1000px;
    background-color: #000000;
    text-align: center;

}

.photo{
    width: 300px;
    height: 300px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
}

.photo img{

    width: 250px;
    height: auto;

}

Upvotes: 0

Views: 107

Answers (1)

Alex
Alex

Reputation: 1593

Add line-height: 300px; and vertical-align: middle; to .photo:

.photo {
    width: 300px;
    height: 300px;
    margin-top: 50px;
    margin-bottom: 50px;
    float: left;
    text-align: center;
    line-height: 300px;
}

.photo img {
    vertical-align: middle;
}

Here is a working example: http://jsfiddle.net/QXGuH/.

Upvotes: 1

Related Questions