alignment of an html css image

Question

I’m learning HTML and CSS now, and I’m having a question.

When adding my logo I could only center it using text-align: center, but using float and other commands does not change its position, I wonder why this occurs and if there are better ways to manipulate the position of an image.

Thank you.

HTML code

<header>
    <div class="container">
        <div id="logo">
            <img src="logo.png">
        </div>
    </div>
</header>

CSS CODE

#header{
    background-color: #35b8b0;
    height: 250px;
}


#logo{
    padding-top: 30px;
    width: 100%;
    text-align: center;
}

#logo img{
    max-width: 100%;
}

#container{
    width: 1000px;
    margin:0 auto;
}

Answer 1

The image is an element of the type inline, so it is correct yes to align with text-aling. Another thing is that float not to line up, float is for one element to float next to another. Apart from this the way you set up the layout is not very cool, you used fixed values and is nothing responsive, but I will not get into this matter here...

If you want other alignment techniques you can place the image with display:block and use margin:auto to align it horizontally.

Or else you can change the display of container image father to display:flex for example, and place justfy-content:center to align in the middle. No need to change the image display.

I suggest you read this documentation to better understand these things

• https://developer.mozilla.org/en-US/docs/Web/CSS/display
• https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Look at the option just changing the image properties without touching the parent container.

*{
    margin: 0;
    padding: 0;
}
header{
    background-color: #35b8b0;
    height: 250px;
}

footer{
    clear: both;
    height: 50px;
    background-color: #35b8b0;
    text-align: center;
    padding-top: 30px;
    font-family: monospace;
}

#foto1{
    padding-top:500px;
}

#logo{
    padding-top: 30px;
    width: 100%;
    text-align: center;
}

#logo img{
    max-width: 100%;
    display: block;
    margin:0 auto;
}

.container{
    width: 1000px;
    margin:0 auto;
}

  

<header>
    <div class="container">
        <div id="logo">
            <img src="https://placecage.com/100/100">
        </div>
    </div>
</header>

<div id="foto1">

</div>

<footer>Desenvolvido por Arthur Luiz</footer>

Answer 2

good morning.

look, usually you use CSS for formatting but you can do some things by HTML. I recommend you use something like this:

<center><img src="imagem.png"></center>

and you said that some commands were not working. what happens is this: you must identify the tag that will receive the formatting. if you’ve ever done it then you may have written something wrong.