Как разместить изображения там, где я хочу?

Я делаю школьный проект о веб-странице, а мой - о новостях видеоигр, анализе, статьях и т. д.

Я хочу, чтобы тело статьи было центрировано и имело максимальную ширину 600 пикселей. До сих пор я мог обойти это, используя набор полей, но когда я добавляю изображения, находятся ли они поверх текста, чтобы проиллюстрировать новое, или я хочу добавить еще одно между ними, все портится, и я не знаю что делать

Пока что это все, что у меня есть:

<!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>

fieldset предназначены для использования в form, а не в качестве суррогатных оберток.

— 20.05.2024 09:31

Попробуйте img { max-width: 100%; }.

— 20.05.2024 09:40

html css

20.05.2024 09:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Судя по вашему описанию, я предполагаю, что это то, что вы ищете:

<!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);
        }


        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>

<div style = "max-width: 600px; margin-inline: auto">
    <h1>Una filtración asegura que el próximo Call of Duty saldrá en Xbox Game Pass</h1>

    <img src = "https://images.unsplash.com/photo-1715893743617-056b988f1e73?q=80&w=2482&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         height = "400px" width = "100%" style = "object-fit: cover">
    <p>
        Aute est pariatur sint esse quis tempor aliquip adipisicing consectetur. Anim deserunt dolore laboris reprehenderit nostrud tempor ullamco velit sint. Cupidatat sunt officia in cupidatat ut ea reprehenderit. Ipsum nulla aliqua exercitation nisi officia. Fugiat esse nostrud nostrud magna magna fugiat ea labore magna. Pariatur voluptate laboris ad. Occaecat mollit quis reprehenderit sunt velit quis dolore. Aute dolor consectetur minim cupidatat quis esse aliqua nulla proident tempor pariatur.
    </p>

    <img src = "https://images.unsplash.com/photo-1716034351843-98080eafa00c?q=80&w=3369&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         height = "400px" width = "100%" style = "object-fit: cover">

</div>

</body>

</html>

Я не знаю, как мне тебя переиграть, но спасибо, Исмаил.

— 20.05.2024 09:45

Это ответ на дамп кода, без каких-либо объяснений или текста вообще, и хотя это может помочь ОП научиться просить милостыню, это не поможет будущим посетителям сайта, что и является причиной создания сайта. Пожалуйста, рассмотрите возможность улучшения ответа, включая текст, объясняющий проблемы ФП и ваше решение.

— 20.05.2024 13:27

20.05.2024 09:37

Просто добавь

            display: flex;
            flex-direction: column;
            align-items: center;

чтобы ваш тег тела оставался в CSS.

Это заставит все тело выглядеть как flexbox и, поскольку его направление будет установлено в столбец. он возьмет его содержимое и поместит его вертикально. align-items выровняет все (включая изображение) по центру.

весь код,

<!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);
                display: flex;
                flex-direction: column;
                align-items: center;
                }

            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>

20.05.2024 09:50

Другие вопросы по теме

Почему мои пользовательские шрифты больше не загружаются онлайн?

Как перерисовать компонент в +layout.svelte

Как создать несколько раскрывающихся кнопок

Цвет не меняется при смене темы

Лигатуры не отображаются на веб-сайте, но в Google Fonts все в порядке

Apexcharts показывает ось даты и времени за пределами длины серии

Как установить нормальный и жирный шрифт независимо с помощью CSS?

Почему Vercel не отображает мой CSS-файл при развертывании на веб-странице?

Добавление прослушивателя событий в поле ввода и проверка, пусто ли оно

Как установить индекс, выбрав в JavaScript

Как разместить изображения там, где я хочу?

Ответы 2

Другие вопросы по теме

Похожие вопросы