Question

我试图在div中创建一行三个居中的图像。图像和div将以页面为中心。图像将在div中，这是我的代码到目前为止：

HTML / PHP

<?php
        $resultSet = $db->query("SELECT * FROM table");

        if ($resultSet->num_rows != 0)
        {
             while ($rows = $resultSet->fetch_assoc())
            {
                $id = $rows["id"];
                $image = $rows["image"];

                if ($id <= 3)
                {
                    echo "<div id=main>";
                    echo "<img src=$image>";
                    echo "</div>";


                }
            }
        }

CSS：

body{
    position: relative;
}

#main{
    background-color: red;
    width: 80%;
    height: auto;
    display: inline;

}

#main img{

    width: 10%;
}

我在#main div上尝试了text-align：center，margin：0 auto，position：absolute（left / right：50％），有时它居中，但它会将图像作为块（右边）在彼此之上），而不是内联。如何将div和图像置于页面中心，图像彼此相邻？

Answer 1

为#main ..

尝试此样式

    <style>

body{
    position: relative;
}

#main{
    background-color: red;
    width: 80%;
    height: auto;
    display: block;
    margin-left:auto;
    margin-right: auto;
    text-align:center;
}

#main img{

    width: 10%;
}

</style>

循环使用数据库图像并使用CSS将它们居中

1 个答案: