Cant center or use css on img inside PHP echo

Question

Ok. Here is my problem. Regardless when i do my while loop to get my list elements out to the page, my images wont center. I have tried using divs and classes but nope. I have tried closing the tags and using html and opening the PHP tags but no. Here is the code. Help plz.

<?php
while($row = mysqli_fetch_array($result))
    {
        $id = $row['id'];
        $name = $row['name'];
        $desc = $row['longDesc'];
        $cost = $row['cost'];
        $qty = $row['quantity'];
        $img = $row['imageFilename'];
        echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>&pound;$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
    }
?>

Here is the css:

ul#items li{
color: white;
padding: 10px;
display: block;
font-family: 'Alef';
height: 180px;
text-align: center;
width: 150px;
vertical-align: middle;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
display: inline-block;
margin: 10px;
}
ul#items li:hover{
border: 1px solid #8E8E8E;
}
ul#items img{
margin-top: 15px;
display: block;
position: absolute;
border: 1px solid black;
max-width:149px;
height: 118px;
width: fit-content;
}

Help please. IMAGE OF PROBLEM: http://i.stack.imgur.com/arzL0.png

Answer 1

echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>&pound;$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";

You're not center'ing the 'img' tag in your code. Try this instead:

echo "<a href='paintings.php?id=$id'><li><center><img src='../../_/images/paintings/$img'><div id='name'>$name</div><div id=cost>Cost: <b>&pound;$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";

Answer 2

You can't center a "block" element with text-align: center;

You can try making the img display: inline-block; or just leave them at the default inline.

display: inline-block;

Answer 3

There is no problem in the php, the problem its with css. try putting a div there and make it margin-left: auto and margin-right:auto.

If you want a good answer, try posting a jsfiddle example. www.jsfiddle.com

Answer 4

There are many places where your HTML could/should be improved. A lot of it depends on context we don't have, which is understandable, but doesn't make it easy to give you a complete answer.

To make it work and still look like your screenshot, I would first:

• Move the anchor tags into the list item
• Remove any IDs that are within loops that do not change per loop iteration. An id is a unique identifier. This doesn't have anything to do with your question, but is important.

Then refer to this (INCOMPLETE) fiddle to get started: http://jsfiddle.net/aNgcb/

The css might look something like this:

ul#items {
    list-style-type:none;
    overflow:hidden;
}
ul#items li {
    color: white;
    padding: 10px;
    font-family:'Alef';
    height: 180px;
    text-align: center;
    width: 150px;
    background:url('../images/nav/navBg.jpg');
    border: 1px solid #191919;
    float: left;
    margin: 10px;
}
ul#items li:hover {
    border: 1px solid #8E8E8E;
}
ul#items img {
    border: 1px solid black;
    height: 118px;
    max-width: 100%;
}