如何自定义网页图片位置？游戏新闻网页布局问题求助

问题描述 #

我正在制作一个包含游戏新闻、评测、文章等内容的学校网页项目。希望文章主体居中且最大宽度为600px，目前通过fieldset实现了文本部分的布局，但添加图片（无论是标题上方还是文本中间）时页面布局就会混乱，不知如何解决。以下是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>ALEXGUIAS</title>
        <style type="text/css">
            body {font-family: Verdana, Geneva, Tahoma, sans-serif;
                background-color: #54545C;
                color:rgb(180, 220, 255)
                }
            header {
                border-color: rgb(255, 196, 0);
                border-radius: 10px;
                box-shadow: 0px 0px 5px 5px rgb(255, 196, 0);
                color: rgb(255, 196, 0);
                text-align: center;
                padding: 20px 0;
                font-style: italic;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                font-weight: 700;
                    }
            nav li {display: inline;
                    padding: 25px;
                    }
            a.class1 {
                    color: rgb(255, 196, 0);
                    }
            a.class1:link {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }
            a.class1:visited {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }
            a.class1:hover {
                    text-decoration: underline;
                    color: rgb(255, 196, 0);
                    }
            a.class1:active {
                    text-decoration: none;
                    color: rgb(255, 196, 0);
                    }
            fieldset {
                padding-top: 10px;
                margin: auto;
                border: none;
                max-width: 600px;
                height: auto;
                    }
            h1 {
                margin: auto;
                padding: 20px;
                text-align: center;
                max-width: 600px;
                overflow: hidden;
            }
            img {
                margin-left: auto;
                margin-right: auto;
                display: inline;
            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="PaginaPrincipal2.html" target="blank" class="class1"><img src="LOGO.png" height="15%" width="15%"></img></a></li>
                    <li><a href="Noticias.html" target="blank" class="class1">NOTICIAS</a></li>
                    <li><a href="Analisis.html" target="blank" class="class1">ANÁLISIS</a></li>
                    <li><a href="Articulos.html" target="blank" class="class1">ARTÍCULOS</a></li>
                    <li><a href="Guias.html" target="blank" class="class1">GUÍAS</a></li>
                    <li><a href="Lanzamientos.html" target="blank" class="class1">PRÓXIMAMENTE</a></li>
                    <li><a href="Apoyanos.html" target="blank" class="class1">APÓYANOS</a></li>
                    <li><a href="Usuario.html" target="blank" class="class1">ENTRAR/CREAR CUENTA</a></li>
                </ul>
            </nav>
        </header>
        <h1>Una filtración asegura que el próximo Call of Duty saldrá en Xbox Game Pass</h1>
        <img src="COD.jpg" height="30%" width="30%">
        <fieldset>
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            <img src="COD.jpg" height="25%" width="25%">
        </fieldset>
    </body>
</html>

问题原因 #

1. fieldset是表单专用元素，用于分组表单控件，用它做文章容器不符合语义规范，也容易引发不必要的布局冲突。
2. 图片设置display: inline，而inline元素无法通过margin: auto实现水平居中，导致图片位置混乱。
3. 标题、图片、文本分散在不同容器中，没有统一的父容器控制整体布局，导致元素无法对齐。

解决方案 #

1. 使用语义化的<article>标签替代fieldset作为文章主体容器，统一包裹标题、图片和文本内容。
2. 给文章容器设置max-width: 600px和margin: 0 auto，实现整体居中且限制最大宽度。
3. 调整图片样式：设置display: block让图片可以用margin: auto居中，添加max-width: 100%确保图片不会超出容器宽度，避免溢出。

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>ALEXGUIAS</title>
        <style type="text/css">
            body {
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                background-color: #54545C;
                color: rgb(180, 220, 255);
                margin: 0;
                padding: 0;
            }
            header {
                border-color: rgb(255, 196, 0);
                border-radius: 10px;
                box-shadow: 0px 0px 5px 5px rgb(255, 196, 0);
                color: rgb(255, 196, 0);
                text-align: center;
                padding: 20px 0;
                font-style: italic;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                font-weight: 700;
                margin: 20px;
            }
            nav li {
                display: inline;
                padding: 25px;
            }
            a.class1 {
                color: rgb(255, 196, 0);
            }
            a.class1:link,
            a.class1:visited,
            a.class1:active {
                text-decoration: none;
                color: rgb(255, 196, 0);
            }
            a.class1:hover {
                text-decoration: underline;
                color: rgb(255, 196, 0);
            }
            /* 文章主体容器 */
            article {
                max-width: 600px;
                margin: 0 auto;
                padding: 0 20px;
            }
            article h1 {
                text-align: center;
                padding: 20px 0;
                margin: 0;
            }
            article img {
                display: block;
                margin: 20px auto;
                max-width: 100%;
                /* 保留原比例，避免拉伸 */
                height: auto;
            }
            article p {
                line-height: 1.6;
                margin: 16px 0;
            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="PaginaPrincipal2.html" target="_blank" class="class1"><img src="LOGO.png" height="15%" width="15%"></img></a></li>
                    <li><a href="Noticias.html" target="_blank" class="class1">NOTICIAS</a></li>
                    <li><a href="Analisis.html" target="_blank" class="class1">ANÁLISIS</a></li>
                    <li><a href="Articulos.html" target="_blank" class="class1">ARTÍCULOS</a></li>
                    <li><a href="Guias.html" target="_blank" class="class1">GUÍAS</a></li>
                    <li><a href="Lanzamientos.html" target="_blank" class="class1">PRÓXIMAMENTE</a></li>
                    <li><a href="Apoyanos.html" target="_blank" class="class1">APÓYANOS</a></li>
                    <li><a href="Usuario.html" target="_blank" class="class1">ENTRAR/CREAR CUENTA</a></li>
                </ul>
            </nav>
        </header>
        <!-- 统一用article包裹所有文章内容 -->
        <article>
            <h1>Una filtración asegura que el próximo Call of Duty saldrá en Xbox Game Pass</h1>
            <img src="COD.jpg" alt="Call of Duty 相关图片">
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
            <img src="COD.jpg" alt="Call of Duty 相关图片">
        </article>
    </body>
</html>

额外优化说明 #

• 给body添加margin: 0; padding: 0，消除默认边距带来的布局偏移。
• 合并了链接的样式，减少冗余代码。
• 给图片添加alt属性，提升可访问性。
• 给文本添加<p>标签，符合语义规范，同时设置行高提升阅读体验。
• 修正了target="blank"为target="_blank"，这是正确的属性值写法。

内容的提问来源于stack exchange，提问作者fdezdavila