Why wont image move directly to the center (NOT MIDDLE) of the webpage

Question

so, i've tried using "text-align: center" property but nothing seemed to help, image is slightly off(actually a lot) the center, and its png file so i'm not sure what could be the issue. I've had this problem when I was working on different projects as well and I really couldnt find the solution. I may be making a huge major mistake in my code so if you notice let me know. Make sure to run it in full page so you see the issue! Heres the HTML and CSS:

body {
    background-color: #161616;
}
header {
    height: 3.375rem;
}
.ul1 {
    list-style: none;
    float: right;
}
li {
    display:inline;
    color: white;
    margin: 0.625rem;
    position: relative;
    right: 0.625rem;
}

a {
    text-decoration: none;
    color:white;
    font-size: 1.063rem;
    font-family: 'Prompt', sans-serif;
}

.img-1 {
   display: block;
   text-align: center;
   padding: 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200&display=swap" rel="stylesheet">    
    <title>project1</title>
</head>
<body>
<header>
    <nav>
        <ul class="ul1"> 
            <li><a href="https://duckduckgo.com/about"target="_blank">About</a></li>
            <li><a href="https://duckduckgo.com/hiring"target="_blank">Work</a></li>
            <li><a href="https://twitter.com/duckduckgo"target="_blank">Contact us</a></li>
        </ul>
    </nav>
</header>

<section class="pre-midpage">
    <div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>

thank you! this is the one that has helped me the most, applying overflow:auto; to the div didnt help, it helped when i applied it to the header for some reason, even though img tag isnt in header so do you know what caused that? — Nuclear, May 25 '21 at 18:59
read the duplicate to understand the issue around using floats — Temani Afif, May 25 '21 at 19:20

ulou · Answer 1 · 2021-05-23T20:49:59.360

Your div.img-1 is not taking 100% of possible width. In fact it takes 50%. It's happening because you didn't clear float: left from .ul1, you can add clearfix as it's explained in duplicated post or use display: flex and justify-content: flex-end; instead:

body {
    background-color: #161616;
}
header {
    height: 3.375rem;
}
.ul1 {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}
li {
    display:inline;
    color: white;
    margin: 0.625rem;
    position: relative;
    right: 0.625rem;
}

a {
    text-decoration: none;
    color:white;
    font-size: 1.063rem;
    font-family: 'Prompt', sans-serif;
}

.img-1 {
   text-align: center;
   padding: 0px;
}

.img-1 > img {
  margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200&display=swap" rel="stylesheet">    
    <title>project1</title>
</head>
<body>
<header>
    <nav>
        <ul class="ul1"> 
            <li><a href="https://duckduckgo.com/about"target="_blank">About</a></li>
            <li><a href="https://duckduckgo.com/hiring"target="_blank">Work</a></li>
            <li><a href="https://twitter.com/duckduckgo"target="_blank">Contact us</a></li>
        </ul>
    </nav>
</header>

<section class="pre-midpage">
    <div class="img-1"><img src="https://i.imgur.com/7bjqURH.png" alt="img-1"></div>
</section>
</body>
</html>

Why wont image move directly to the center (NOT MIDDLE) of the webpage

1 Answers1