I am trying to align an element inside of a div but the element doesn't horizontally align with the rest of the contents inside of the div.
Here's a picture describing my problem: here's the problem
As you can see the logo [M-WAY RECORDS] is not on the same row as the rest of the navbar buttons even though its in the same DIV. How do I horizontally align it with the rest of the content of the div. Keep in mind that I am a beginner coder so no need to be mean or such in comments. I'd like constructive critizism to evolve bu no need to hate on the code or me just because I made mistakes.
Anyways here's the html:
body {
font-family: SF0001;
}
/*FONTS*/
@font-face {
font-family: SF0001;
src: url(font/SFProDisplay-Light.ttf);
}
/*HEADER NAVBAR*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
}
li {
float: left;
}
li a {
display: block;
float: left;
color: black;
text-align: center;
padding: 5px 16px;
text-decoration: none;
border-radius: 5px;
}
li a:hover {
background-color: rgb(241, 241, 241);
transition: 0.3s;
}
li a:active {
color:rgb(41, 41, 41);
}
li img {
width: 7.5%;
height: 7.5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script link="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="header-navbar">
<ul>
<li><a href="pages/index-about.html">Projects</a></li>
<li><a href="pages/index-about.html">About</a></li>
<li><a href="pages/index-about.html">Contact</a></li>
<!--Here's the image:-->
<li><a href="index.html"><img src="content/logowide.png" /></a></li>
</ul>
</div>
</div>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Instead of float i would just use display:flex; on li element and it's child
JSfiddle: enter link description here
Code example:
/*BODY*/
body {
font-family: SF0001;
}
/*FONTS*/
@font-face {
font-family: SF0001;
src: url(font/SFProDisplay-Light.ttf);
}
/*HEADER NAVBAR*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: row;
width: 40%;
}
li a {
display: flex;
height: 4%;
color: black;
text-align: center;
padding: 5px 16px;
text-decoration: none;
border-radius: 5px;
}
li a:hover {
background-color: rgb(241, 241, 241);
transition: 0.3s;
}
li a:active {
color: rgb(41, 41, 41);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script link="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="header-navbar">
<ul>
<li><a href="pages/index-about.html">Projects</a></li>
<li><a href="pages/index-about.html">About</a></li>
<li><a href="pages/index-about.html">Contact</a></li>
<!--Here's the image:-->
<li>
<a href="index.html"><img src="https://mlzsmzfeleix.i.optimole.com/EL7c_sg.k03b~5e599/w:auto/h:auto/q:75/https://rdlcom.com/wp-content/uploads/qa-testing-as-a-service-test-io-creative-company-logo-terrific-1.png">
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
What if you'll try to use display: inline-block; for li element ?
li {
float: left;
display: inline-block;
}
CodePudding user response:
So as i undustud u want to have navigation in left side, logo at midle, to do this float is not best solution, because u will have lot of limitation, u will have only two posibility to move left or right, and put on center only with margin. I use flex-box, and this code are very simplifi your job. U can use my example:
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: flex-start;
}
.box:first-child>span {
margin-right: auto;
}
.box:last-child>span {
margin-left: auto;
}
/* non-essential */
.box {
align-items: center;
height: 40px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
}
li {
float: left;
}
li a {
display: block;
float: left;
color: black;
text-align: center;
padding: 5px 16px;
text-decoration: none;
border-radius: 5px;
}
li a:hover {
background-color: rgb(241, 241, 241);
transition: 0.3s;
}
li a:active {
color:rgb(41, 41, 41);
}
.header-logo{
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script link="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<div class="header-navbar">
<div class="container">
<div class="box">
<ul>
<li><a href="pages/index-about.html">Projects</a></li>
<li><a href="pages/index-about.html">About</a></li>
<li><a href="pages/index-about.html">Contact</a></li>
<!--Here's the image:-->
</ul>
</div>
<div class="box"><a href="index.html"><img class="header-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Logo!_Logo.svg/1200px-Logo!_Logo.svg.png" /></a></div>
</div>
</div>
</div>
</body>
</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>