不能在PHP echo中居中或在img上使用css - Cant center or use css on img inside PHP echo

Cant center or use css on img inside PHP echo

本文关键字：css img PHP echo 中居不能 | 更新日期: 2023-09-27

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

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

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

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

有很多地方可以/应该改进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%;
}

您不能使用text-align:center将"block"元素居中；

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

display: inline-block;

php没有问题，问题在于css。试着在那里放一个div，使其margin-left:auto和margin-right:auto。

如果你想要一个好的答案，试着发布一个jsfiddle的例子。www.jsfiddle.com