Html - How can I place the images where I want?

fdezdavila
May 20, 2024
118 views
0 votes
2 Answers

I’m making a school project about a webpage and mine’s about videogame news, analysis, articles etc.

I want the body of the article to be centered with a max width of 600px. So far I could work around this using a fieldset, but when I add the images, wether it is on top of the text to ilustrate the new or if I want to add another in between is when everything messes up and I don’t know what to do

So far, this is all I’ve got:

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

Tags: css html

Answers

Based on your description, I assume this is what you are looking for:

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

Just add

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

to your body tag’s staying in css.

It will make the whole body appear as a flexbox and, as it’s direction is set to column. it will take it’s contents and put them vertically.
align-items will align everything (including the image) to the center.

whole code,

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I place the images where I want?

Answers