在PHP echo内的img上不能居中或使用css

嗯。这是我的问题。无论我何时执行while循环以将列表元素输出到页面，我的图像都不会居中。我试过使用div和class，但没有。我尝试过关闭标签，使用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>";
    }
?>

请帮忙。 问题的图像：

echo”“；

您没有在代码中居中显示“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>";

echo”“；

不能将文本对齐的“块”元素居中：居中

您可以尝试使img显示：内联块；或者将它们保留在默认的内联状态

display: inline-block;

---

php没有问题，css也有问题。尝试在那里放置一个div，并使其左边距：auto，右边距：auto

---

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

在许多地方，您的HTML可以/应该得到改进。这在很大程度上取决于我们所没有的背景，这是可以理解的，但并不容易给你一个完整的答案

要使其工作并看起来仍然像您的屏幕截图，我首先：

• 将定位标记移动到列表项中
• 删除循环中每个循环迭代都不会更改的所有ID。id是唯一的标识符。这与你的问题无关，但很重要

然后参考此（不完整）小提琴开始：

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%;
}

---

显示从循环打印的html。这比循环更有用，因为这就是我们设计的样式。-至少对我来说，你有JSFIDLE链接吗？已经分类了。谢谢比约恩约翰逊非常感谢。修正了这个问题。如果它提供了你正在寻找的答案，请考虑选择这个作为你问题的答案。

display: inline-block;

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%;
}