This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I've had an issue with my header. The nav links I have just won't go to the center no matter what I do. Here are the codes.
Can anyone tell me why isn't it working ?
body {
background-color: black;
color: #6e07a6;
font-size: 16px;
font-family: 'Poppins', sans;
font-weight: 400;
}
.header-part {
width: 100%;
height: 5rem;
background-color: #6e07a6;
color: white;
margin: 0;
padding: 0;
top: 0;
}
.nav-links {
display: flex;
list-style: none;
text-decoration: none;
justify-content: space-evenly;
align-items: center;
}
<div class="header-container">
<div class="header-part">
<header id="header">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
<li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
</ul>
</header>
</div>
</div>
<div class="main-page"></div>
body {
background-color: black;
color: #6e07a6;
font-size: 16px;
font-family: 'Poppins', sans;
font-weight: 400;
}
.header-part {
width: 100%;
height: 5rem;
background-color: #6e07a6;
color: white;
margin: 0;
padding: 0;
top: 0;
display: flex;
align-items: center;
}
#header {
display: flex;
align-items: center;
width: 100%;
}
.nav-links {
display: flex;
list-style: none;
text-decoration: none;
justify-content: space-evenly;
align-items: center;
width: 100%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test site</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="header-container">
<div class="header-part">
<header id="header">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">Projects</li>
<li class="nav-link">Contact</li>
<li class="nav-link"><span class="sign-in">Sign in / Login</span></li>
</ul>
</header>
</div>
</div>
<div class="main-page">
</div>
</body>
</html>
I set the display types for your wrapping elements, and also defined their width to fill the purple area. By default they are set to display: block;
they are in center , the thing is your ul height doesn't match to your header
add this line to .nav-links
height : 5rem;
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 12 months ago.
This post was edited and submitted for review 11 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I have a nav bar with height: 5vh and the rest of the page inside a container with height: 95vh. I use display: flex for my nav bar <ul> element and align-items: stretch so that the <li> elements have 100% height of the nav bar. Also I set the height of the <a> elements to 100% of the parent <li> elements.
However, the problem is that I want the text of the <a> elements to be vertically aligned to center (not top). I can't set a vertical padding for the <a> elements because this will affect the height of the element and will not make its height responsive.
Here is the full code:
<!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">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
nav ul {
background-color: aquamarine;
list-style-type: none;
margin: 0;
padding: 0;
height: 5vh;
display: flex;
align-items: stretch;
}
nav a {
display: inline-block;
padding: 0 10px;
height: 100%;
text-decoration: none;
font-weight: bold;
color: navy;
}
nav a:hover {
background-color: rgb(95, 206, 169);
}
nav a.active {
background-color: azure;
}
.content {
height: 95vh;
overflow: hidden;
background-color: silver;
}
</style>
</head>
<body>
<!-- Nav bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- Rest of the page -->
<div class="content"></div>
</body>
</html>
You can set <a> to flex and use align-items: center to align it vertically
<!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">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
nav ul {
background-color: aquamarine;
list-style-type: none;
margin: 0;
padding: 0;
height: 5vh;
display: flex;
align-items: stretch;
}
nav a {
display: flex;
align-items: center;
padding: 0 10px;
height: 100%;
text-decoration: none;
font-weight: bold;
color: navy;
}
nav a:hover {
background-color: rgb(95, 206, 169);
}
nav a.active {
background-color: azure;
}
.content {
height: 95vh;
overflow: hidden;
background-color: silver;
}
</style>
</head>
<body>
<!-- Nav bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- Rest of the page -->
<div class="content"></div>
</body>
</html>
Update
Fixed the navbar being too short in smaller windows:
nav ul {
min-height: 5vh;
...
Didn't see a style for <li> so I added it and looks vertically centered on fullpage, but the navbar shrinks drastically when window scales down (this behavior is before any modification).
li {
min-height: 100%;
display: inline-block;
align-self: space-around;
vertical-align: bottom;
}
<!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">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
nav ul {
background-color: aquamarine;
list-style-type: none;
margin: 0;
padding: 0;
min-height: 5vh;
display: flex;
align-items: stretch;
}
li {
min-height: 100%;
display: inline-block;
align-self: space-around;
vertical-align: bottom;
}
nav a {
display: inline-block;
padding: 0 10px;
min-height: 100%;
text-decoration: none;
font-weight: bold;
color: navy;
}
nav a:hover {
background-color: rgb(95, 206, 169);
}
nav a.active {
background-color: azure;
}
.content {
height: 95vh;
overflow: hidden;
background-color: silver;
}
</style>
</head>
<body>
<!-- Nav bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
<!-- Rest of the page -->
<div class="content"></div>
</body>
</html>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed last year.
I am new to web development and I am trying to create a responsive navbar but float Property is Not Working. Here is the HTML Code
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
and here is the CSS code
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
I have tried all thing I think of like padding, Increasing logo width, etc. But it make it unresponsive on bigger screen
Solution 1: (Using Float)
Remove display: flex; from nav CSS and add float: left; on .logo CSS.
nav {
background: #000000;
color: white;
line-height: 76px;
}
.logo {
float: left;
}
Solution 2: (Using Flex)
Just add justify-content: space-between; in nav CSS.
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
I hope it'll help you out, Thank You
Add this to your nav style
justify-content: space-between;
add justify-content: space-between to nav styles
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css.css"></link>
</head>
<body>
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
</body>
</html>
just add in nav css ( justify-content: space-between;)
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
nav {
display: flex;
background: #000000;
color: white;
line-height: 76px;
justify-content: space-between;
}
nav {
height: 76px !important;
}
.logo h1{
line-height: 76px;
}
a {
display: inline-block;
}
.links{
float:right !important;
}
<nav class="nav">
<div class="logo" id="logo2">
<h1> Nav</h1>
</div>
<div class="links float-right">
Home
About
Contact
Work
</div>
</nav>
I am trying to push my navbar up and align my navbar up to the label which is supposed to be the logo but I don't know how I can do that ...any help would be appreciated...here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana;
}
html, body {
height: 100%;
}
.container1 {
min-height: 100%;
}
.main {
overflow: auto;
padding-bottom: 50px;
}
div.footer>a {
text-decoration: none;
color: red;
}
div.footer {
background-color: black;
color: white;
position: relative;
height: 50px;
margin-top: -50px;
clear: both;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li a {
text-decoration: none;
background-color: black;
color: white;
font-size: 17px;
margin: 20px;
}
nav ul li {
list-style: none;
}
nav ul.navbar {
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<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">
<title>Home</title>
<link rel='stylesheet' href='../Css/styles.css' </head>
<body>
<nav>
<span><label id='logo'>Logo</label></span>
<ul class='navbar'>
<li><a href='#' class='active'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
<div class='container1'>
<div class='main'>
</div>
</div>
<div class='footer'>
Created by <a href='https://www.youtube.com/channel/UCLJQcARXQmADJADQO3ZZqfQ?
view_as=subscriber' target='_blank'>Precious Nyaupane</a>|© 2020 All rights reserved
</div>
</body>
</html>
Displaying nav as flex should do the trick
nav {
display: flex;
}
Demo
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 years ago.
i want to center the content of "header", i can't figure out why it's left and not centered.
Should i make the image part of the ?
i tried text-align: center; but it doesn't work.
........................................................................................................................................................
header{
display: flex;
align-items: center;
}
.logo{
width: 300px;
height: 170px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a{
text-decoration: none;
color: black;
}
li{
display: inline;
margin: 20px;
padding-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="home.css" rel="stylesheet" type="text/css">
<title>I.S.R.F.</title>
</head>
<body>
<header>
<ul class="left">
<li>HOME</li>
<li>ALBO</li>
</ul>
<img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
<ul>
<li>L'ISTITUTO</li>
<li>CONTATTI</li>
</ul>
</header>
</body>
</html>
Add justify-content: center to your .header and that should centered. Read more about the box model and flexbox
header{
display: flex;
align-items: center;
justify-content: center;
}
.logo{
width: 300px;
height: 170px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a{
text-decoration: none;
color: black;
}
li{
display: inline;
margin: 20px;
padding-top: 40px;
}
<header>
<ul class="left">
<li>HOME</li>
<li>ALBO</li>
</ul>
<img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
<ul>
<li>L'ISTITUTO</li>
<li>CONTATTI</li>
</ul>
</header>
Add in header : justify-content: center
header{
display: flex;
align-items: center;
justify-content: center
}
.logo{
width: 300px;
height: 170px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a{
text-decoration: none;
color: black;
}
li{
display: inline;
margin: 20px;
padding-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="home.css" rel="stylesheet" type="text/css">
<title>I.S.R.F.</title>
</head>
<body>
<header>
<ul class="left">
<li>HOME</li>
<li>ALBO</li>
</ul>
<img class="logo" src="https://i.ibb.co/88SQfhS/Logo-Makr-3-Klx-Ho.png" alt="logo">
<ul>
<li>L'ISTITUTO</li>
<li>CONTATTI</li>
</ul>
</header>
</body>
</html>
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
I having problems with moving the text of the a tag to the middle of the nav bar, if I use padding-top the hover for the a tag overflow so I hide it using overflow: hidden; on the nav bar, what is the best solution for this problem ?.
note that my question is not about how to center an element who is a child of an other element like a p tag inside a div, and also I'm asking for the best approach in this current situation, which I guess a lot of beginner find it tricky .
html, body {
margin: 0px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
color: white;
background: black;
}
header .title{
padding-left: 10px;
font-size: 2rem;
}
header h1 {
margin: 0;
}
nav {
overflow: hidden;
}
nav ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
height: 100%;
}
nav ul li {
list-style-type: none;
text-align: center;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
font-size: 1.4rem;
display: block;
height: 100%;
padding-top: 20px;
}
nav a:hover {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header>
<div class="title">
<h1>Biblio</h1>
</div>
<nav>
<ul>
<li>home</li>
<li>languages</li>
<li>books</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
nav a {
display: flex;
align-items: center;
}
...will center them vertically, as long as the top and bottom padding values are equal:
html, body {
margin: 0px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
color: white;
background: black;
}
header .title{
padding-left: 10px;
font-size: 2rem;
}
header h1 {
margin: 0;
}
nav {
overflow: hidden;
}
nav ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin: 0;
height: 100%;
}
nav ul li {
list-style-type: none;
text-align: center;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
font-size: 1.4rem;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
nav a:hover {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header>
<div class="title">
<h1>Biblio</h1>
</div>
<nav>
<ul>
<li>home</li>
<li>languages</li>
<li>books</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
However, a bigger problem is the fact you made all buttons equal in width, using grid. The general accepted paradigm with top nav menus is: each element takes the required amount of width + some padding. As in:
nav ul {
display: flex;
justify-content: flex-end;
}
nav a {
display: flex;
align-items: center;
padding: 0 .75em;
}
html, body {
margin: 0px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
color: white;
background: black;
}
header .title{
padding-left: 10px;
font-size: 2rem;
}
header h1 {
margin: 0;
}
nav {
overflow: hidden;
}
nav ul {
display: flex;
justify-content: flex-end;
margin: 0;
height: 100%;
}
nav ul li {
list-style-type: none;
text-align: center;
}
nav a {
color: white;
font-weight: bold;
text-decoration: none;
font-size: 1.4rem;
height: 100%;
display: flex;
align-items: center;
padding: 0 .75em;
}
nav a:hover {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header>
<div class="title">
<h1>Biblio</h1>
</div>
<nav>
<ul>
<li>home</li>
<li>languages</li>
<li>books</li>
</ul>
</nav>
</header>
</div>
</body>
</html>