无法在 PHP echo 内的 img 上居中或使用 css答案

【问题标题】：Cant center or use css on img inside PHP echo无法在 PHP echo 内的 img 上居中或使用 css
【发布时间】：2023-03-31 14:55:01
【问题描述】：

好的。这是我的问题。无论我何时执行 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

【问题讨论】：

你有 jsfiddle 链接吗？
已排序。谢谢比约恩约翰逊

标签： php css image tags echo

【解决方案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>";

【讨论】：

【解决方案2】：

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

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

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

然后参考这个（INCOMPLETE）小提琴开始：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%;
}

【讨论】：

非常感谢。修复了问题。
如果它提供了您正在寻找的答案，请考虑选择它作为您问题的答案。

【解决方案3】：

你不能用 text-align: center; 将“块”元素居中；

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

display: inline-block;

【讨论】：

向我们展示从循环中打印的 html。这比循环更有用，因为这就是我们的样式。 - 至少对我来说

【解决方案4】：

php没有问题，css的问题。尝试在其中放置一个 div 并将其设为 margin-left: auto 和 margin-right:auto。

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

【讨论】：