Why is <li> centered?

Asked

Viewed 60 times

1

@charset "UTF-8";

body {
    background-color: rgb(0, 0, 0);
}

/* header principal */

header#main-header {
    width: 246px;
    height: 42px;
    background-color: rgb(68, 68, 68);
    margin: auto;
}

header#main-header img#main-img {
    width: 50px;
    height: 50px;
    float: left;
}

header#main-header h1#main-h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    padding-top: 6px;
}

/* menu principal */

nav#main-menu ul {
    margin: 0px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>File Manager</title>
</head>
<body>

<header id="main-header">
    <img id="main-img" src="image/svg/folder-open-regular.svg" alt="">
    <h1 id="main-h1">File Manager</h1>
</header>

<nav id="main-menu">
    <ul>
        <li><a href="">Project</a></li>
        <li><a href="">Tutorial</a></li>
    </ul>
</nav>
    
</body>
</html>

html css

1 answer

1

Actually it’s not centered. It’s there because the float: left on the tag img is pulling not just the h1 but also the nav to the right, taking the first li.

It is not very recommended to use float: left on several occasions, but in your case, you can solve this by placing the property clear: left; in nav, causing it not to accept elements on its left, "nullifying" the effect of float and forcing the line break. See:

@charset "UTF-8";

body {
    background-color: rgb(0, 0, 0);
}

/* header principal */

header#main-header {
    width: 246px;
    height: 42px;
    background-color: rgb(68, 68, 68);
    margin: auto;
}

header#main-header img#main-img {
    width: 50px;
    height: 50px;
    float: left;
}

header#main-header h1#main-h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    padding-top: 6px;
}

/* menu principal */

nav#main-menu ul {
    margin: 0px;
}

nav#main-menu{
    clear: left;
}
<header id="main-header">
    <img id="main-img" src="image/svg/folder-open-regular.svg" alt="">
    <h1 id="main-h1">File Manager</h1>
</header>

<nav id="main-menu">
    <ul>
        <li><a href="">Project</a></li>
        <li><a href="">Tutorial</a></li>
    </ul>
</nav>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.