Div 未绑定到图像上且文本未正确居中？

Question

我有一个主 div，它是所有 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>";
           }
     }
}?>

CSS

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

我面临的问题是 mainImg (mainTitle) 内部的 div 没有在图像内正确装配。 div 是一个半透明的块，应该完全适合图像的底部，高度为 25%。相反，该块有点从图像中出来。我面临的另一个问题是我在这个 mainTitle div 中的文本。文本居中，但未在 div 中间对齐。我正在尝试使文本具有百分比响应，但是每当我调整文本大小时，它总是低于 div。如何解决这三个问题？ （正确装配 div，对齐文本，并始终将文本保留在 div 内以适应其他窗口大小？

半透明的 div 脱离了图像的边缘

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

Answer 1

<?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 */
    }

?>