0

行。这是我的问题。无论我何时执行 while 循环以将列表元素输出到页面，我的图像都不会居中。我尝试过使用 div 和类，但没有。我尝试关闭标签并使用 html 并打开 PHP 标签，但没有。这是代码。帮助请。

<?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>";
    }
?>

这是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;
}

请帮忙。问题图片：http : //i.stack.imgur.com/arzL0.png

4

4 回答 4

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>";

您没有将代码中的“img”标签居中。试试这个：

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>";
于 2013-05-31T21:49:12.653 回答
0

您不能使用 text-align: center; 将“块”元素居中。

您可以尝试制作 img 显示：inline-block; 或者只是将它们保留在默认的内联中。

display: inline-block;
于 2013-05-31T21:49:56.997 回答
0

php没有问题，css的问题。尝试将 div 放在那里并使其 margin-left: auto 和 margin-right:auto。

如果您想要一个好的答案，请尝试发布一个 jsfiddle 示例。www.jsfiddle.com

于 2013-05-31T22:01:17.513 回答
0

有很多地方可以/应该改进您的 HTML。其中很多取决于我们没有的上下文，这是可以理解的，但并不容易给你一个完整的答案。

为了使它工作并且仍然看起来像您的屏幕截图，我首先会：

  • 将锚标记移动到列表项中
  • 删除在每次循环迭代中不会更改的循环内的任何 ID。id 是唯一的标识符。这与您的问题没有任何关系，但很重要。

然后参考这个（不完整的）小提琴开始：http: //jsfiddle.net/aNgcb/

css 可能看起来像这样：

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%;
}
于 2013-05-31T22:45:04.497 回答