Php Div未固定在图像上，文本未正确居中？

我有一个主分区，它是所有分区的“主分区”。这个div的宽度是页面的70%。在这个div中，是另一个包含图像的div。这个div称为mainImg。它被设置为绝对定位，其余所有元素也被设置为绝对定位。所有这些元素相对于主div绝对移动

这是我的密码：

PHP/HTML

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

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


            if ($id <= 3)
            {
                $images = $rows["image"];
                $title = $rows["title"];
                echo "<div id=main>";
                if ($id == 1)
                {

                    echo "<div id=mainImg>";
                    echo "<img src=$images>";
                    echo "<div id=mainTitle>";
                    echo "<h2>$title</h2>";
                    echo "</div>";
                    echo "</div>";

                }
               echo "</div>";
           }
     }
}?>

我面临的问题是mainImg（mainttitle）中的div在图像中没有被正确地装配。div是一个半透明的块，应该完全适合25%高度的图像底部。取而代之的是，图像中出现了一些块。我所面临的另一个问题是我的文本在这个主标题div。文本是中心的，但不对齐在div的中间。我试图使文本响应，以百分比，但每当我调整文本总是低于div。我如何修复这三个问题？（正确装配div，对齐文本，并始终将文本保持在div内，以适应其他窗口尺寸

半透明div从图像边缘脱落

调整浏览器大小时，文本会发生这种情况

您似乎没有关闭主div（即：

div id=main

）@RamRaider很抱歉，我只是截取了一段代码，使其更具可操作性，但这是我没有弄清楚的部分。当然主div也会重复吗？我想你在循环中使用主div会将主div移到循环外loop@devpro我不想把main div放在循环之外的原因是因为main div只是标题部分，主体部分将有不同的宽度。因此主体部分将覆盖$id>3。我不想将主部分放在循环之外的原因是因为主部分只是标题部分，主体部分将有不同的宽度。我在问题中添加了图像。这就是发生的情况

body{
    position: relative;
}

#main{
    position: relative;
    width: 70%;
    height: auto;
    margin: 1.5% auto;
}

#mainImg{
    position: absolute;
    width: 65%;
}

#mainImg img{
    width: 100%;
}

#mainTitle{
    position: absolute;
    width: 100%;
    height: 25%;
    bottom: 0%;
    background-color: rgba(100, 0, 0, 0.7);
}

#mainTitle h2{
    color: white;
    text-align: center;
    font-family: sans-serif;
    font-size: 120%;
}

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

    if( $res->num_rows > 0 ) {

        echo "<div id='main'>";/* Open main div outside the loop */

        while( $rows = $res->fetch_object() ) {
            $id = $rows->id;

            if ( $id <= 3 ) {

                $image = $rows->image;
                $title = $rows->title;

                if ( $id == 1 ) {
                    echo "
                    <div id='mainImg'>
                        <img src='$image'>
                        <div id='mainTitle'>
                            <h2>$title</h2>
                        </div>
                    </div>";
                }
            }
        }
        echo '</div>';/* close main div */
    }

?>