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 10 months ago.
Essentially, after applying a margin, my text of different sizes all are above or below each other (they are in the same line) but they arent like centered, only when I make them all the same size do they look centered.
body {
background-color: lightgrey;
}
.logo {
font-size: 2.5rem;
}
.navbar {
/* color: white; */
display: flex;
justify-content: space-between;
width: 100%;
padding: 25px 40px;
color: white;
font-family: 'Open Sans', sans-serif;
}
.nav-options {
list-style: none;
}
.nav-options .nav-buttons li {
display: inline-block;
font-size: 1.5rem;
padding: 20px;
font-weight: bold;
}
.navbar a {
color: white;
font-size: 1.5rem;
}
.flex-row {
flex-flow: row wrap;
}
<div class="navbar">
<label class="logo">appy</label>
<div class="nav-options">
<ul class="nav-buttons">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Pricing</li>
<li>Features</li>
<li>FAQ</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div>
<a class="sign-up">Sign Up</a>
</div>
try adding align-items: center; to css class .navbar.
.navbar{
/* color: white; */
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 25px 40px;
color: black;
font-family: 'Open Sans', sans-serif;
}
you can use
justify-content: center;
align-items: center;
then you can give some margin or padding to logo or sign up.
Y
Related
This question already has answers here:
How to Right-align flex item?
(13 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I want to move the NAV bar to the right and I am trying with the justify-content property, but it isn't working.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
color: blanchedalmond;
}
.header {
background-color: lightskyblue;
width: 100%;
height: 80px;
}
.innerheader {
height: 100%;
width: 1200px;
margin: auto;
display: flex;
align-items: center;
}
.logo_nav h1 {
font-weight: 200;
}
.logo_nav h1 span {
font-weight: 900;
}
nav {
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
ul {
display: flex;
padding: 0px 100px 0px 240px;
}
ul a li {
display: flex;
color: blanchedalmond;
font-size: 22px;
}
ul a {
padding: 0px 100px 0px 20px;
}
<header class="header">
<div class="innerheader">
<div class="logo_nav">
<h1>My <span>SITE</span></h1>
</div>
<nav class="nav">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Hire us</li>
</a>
</ul>
</nav>
</div>
</header>
Thanks in advance for your replies.
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
I am building the top navigation of a page. To the left, I have a logo and directly beside it I have my primary navigation links. I have two buttons that I want to position all the way to the right of the page, but I can't figure out how to get them over there. When I am able to get the buttons to move at all, it's only about halfway through the page...which isn't correct.
The buttons should be all the way to the right, like on https://webflow.com/
Notes: I used flex center to vertically center my navigation items.
body {
font-family: 'Poppins', sans-serif;
}
.wrap {
margin: 0 auto;
width: 90%;
}
nav {
display: flex;
align-items: center;
height: 80px;
width: 1000px;
}
nav ul li {
display: inline;
list-style: none;
padding: 0 24px 0 24px;
}
nav a {
color: #353D49;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
nav a:hover {
color: #247BFA;
}
<div class="wrap">
<nav>
<img src="img/logo.svg" />
<ul class="navItems">
<li>Overview</li>
<li>Features</li>
<li>Blog</li>
<li>Learn</li>
</ul>
<div class="actionButtons">
<button class="primary">Request a demo</button>
</div><!--actionButtons-->
</nav>
</div><!--wrap-->
.actionButtons {margin-left: auto}
or
nav {justify-content: space-between}
cheers :)
You can position the element to the right of the flex parent using margin-left: auto. You can do the same for vertical positioning with margin-top: auto.
body {
font-family: 'Poppins', sans-serif;
}
.wrap {
margin: 0 auto;
width: 90%;
}
nav {
display: flex;
align-items: center;
height: 80px;
width: 1000px;
}
nav ul li {
display: inline;
list-style: none;
padding: 0 24px 0 24px;
}
nav a {
color: #353D49;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
nav a:hover {
color: #247BFA;
}
nav .actionButtons {
margin-left: auto;
}
<div class="wrap">
<nav>
<img src="img/logo.svg" />
<ul class="navItems">
<li>Overview</li>
<li>Features</li>
<li>Blog</li>
<li>Learn</li>
</ul>
<div class="actionButtons">
<button class="primary">Request a demo</button>
</div><!--actionButtons-->
</nav>
</div><!--wrap-->
Great case for margin-left: auto; though I would create a separate class. The goal is to make code reusable, so nesting it in your nav tag will make it unwieldy if you continue with this method throughout your project.
I created a separate class for .align-right and you can reuse this in other areas of your project , rather than being limited to .nav or applying it to all of your .actionButtons
body {
font-family: 'Poppins', sans-serif;
}
.wrap {
margin: 0 auto;
width: 90%;
}
nav {
display: flex;
align-items: center;
height: 80px;
width: 1000px;
}
nav ul li {
display: inline;
list-style: none;
padding: 0 24px 0 24px;
}
nav a {
color: #353D49;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
nav a:hover {
color: #247BFA;
}
.align-right {
margin-left: auto;
}
<div class="wrap">
<nav>
<img src="img/logo.svg" />
<ul class="navItems">
<li>Overview</li>
<li>Features</li>
<li>Blog</li>
<li>Learn</li>
</ul>
<div class="actionButtons align-right">
<button class="primary">Request a demo</button>
</div><!--actionButtons-->
</nav>
</div><!--wrap-->
I am trying to vertically center the h1 with the a's in the span but somehow the navigation buttons are a couple pixels higher than the h1. I have tried solving this but i couldn't find a way. So i'm hoping you maybe know what the problem could be.
h1 {
font-family: sans-serif;
font-size: 2em;
font-weight: normal;
}
h1 a {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav {
display: flex;
justify-content: center;
}
.nav nav {
width: 90%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="nav">
<nav>
<div>
<h1>workout</h1>
</div>
<span>
<a id='home' href="index.html">index</a>
<a id='work' href="pricing.html">pricing</a>
<a id='contact' href="schedule.html">schedule</a>
</span>
</nav>
</div>
Just remove .nav div styling for this. check updated snippet below..
h1{
font-family: sans-serif;
font-size:2em;
font-weight:normal;
}
h1 a{
text-decoration: none;
color:black;
font-size: 1em;
}
/*.nav{
display: flex;
justify-content: center;
}*/
.nav nav{
width: 90%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="nav">
<nav>
<div>
<h1>workout</h1>
</div>
<span>
<a id='home' href="index.html">index</a>
<a id='work' href="pricing.html">pricing</a>
<a id='contact' href="schedule.html">schedule</a>
</span>
</nav>
</div>
So I've just learnt flexbox, however even after stating justify-content: flex-start; the list is not aligned to the left side of the column like so:
Image of the problem
Essentially I would like to align the list to the left side of the #navigation container so that there is not space present like in the image above. Any ideas what to change?
#navigation {
min-height: 50px;
width: 100%;
background-color: #2F4E6F;
}
.navflex {
display: flex;
flex-direction: row;
margin: 0;
list-style-type: none;
justify-content: flex-start;
}
.navflex a {
text-decoration: none;
text-decoration: none;
font-family: 'Open Sans';
font-size: 25px;
color: #FFFFFF;
display: block;
padding: 5px 25px;
text-align: center;
}
#home_button {
width: 38px;
height: 38px;
}
.tilde {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
font-family: 'Open Sans';
padding: 7px 0px;
}
#media all and (max-width: 800px) {
.navflex {
flex-direction: column;
flex-wrap: wrap;
}
.tilde {
display: none;
}
}
<div id="navigation">
<ul class="navflex">
<li>
<img src="images/home_button.png" alt="An icon representing a house." id="home_button">
</li>
<li>Phantom of the Opera</li>
<li class="tilde">~</li>
<li>The Lion King</li>
<li class="tilde">~</li>
<li>Wicked</li>
<li class="tilde">~</li>
<li>Bookings</li>
<li class="tilde">~</li>
<li><a href='#'>Location</a></li>
</ul>
</div>
Add padding: 0; to your ul (= .navflex) to avoid the default list padding. And if that isn't close enough to the left, also add padding-left: 0 to the li elements:
#navigation {
min-height: 50px;
width: 100%;
background-color: #2F4E6F;
}
.navflex {
display: flex;
flex-direction: row;
margin: 0;
list-style-type: none;
justify-content: flex-start;
padding: 0;
}
.navflex li {
padding-left: 0;
}
.navflex a {
text-decoration: none;
text-decoration: none;
font-family: 'Open Sans';
font-size: 25px;
color: #FFFFFF;
display: block;
padding: 5px 25px;
text-align: center;
}
#home_button {
width: 38px;
height: 38px;
}
.tilde {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
font-family: 'Open Sans';
padding: 7px 0px;
}
#media all and (max-width: 800px) {
.navflex {
flex-direction: column;
flex-wrap: wrap;
}
.tilde {
display: none;
}
}
<div id="navigation">
<ul class="navflex">
<li><img src="images/home_button.png" alt="An icon representing a house." id="home_button"></li>
<li>Phantom of the Opera</li>
<li class="tilde">~</li>
<li>The Lion King</li>
<li class="tilde">~</li>
<li>Wicked</li>
<li class="tilde">~</li>
<li>Bookings</li>
<li class="tilde">~</li>
<li><a href='#'>Location</a></li>
</ul>
</div>
So I've got my navbar set up pretty close to the way I'd like it to look, but for some reason it won't go to the center of my page. I've tried putting text-align: center; on most of the different elements that make up my nav bar, but it won't go no matter what I do. What am I doing wrong?
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
<div class="banner">
<h1>Brian Funderburke Photography & Design</h1>
<div class="nav">
<ul class="navbar">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Set the .banner width to 100% and then set .nav to center:
.banner{width: 100%;}
.nav{text-align: center;}
See fiddle: https://jsfiddle.net/c51kr3jo/
How I fix this problem usually is by following 3 steps:
Adding a full-width or a big width to the navbar container (.nav div in your case)
Adding a width to the navbar (usually try to find a width that will fit the most elements)
Adding margin: 0 auto to the navbar (this will center align the .navbar div)
Here is a jsfiddle I've created. Hope it helps.
I added
.nav {
display: flex;
justify-content: center;
}
Which I got from this AMAZING article.
http://jsfiddle.net/abalter/44w7b73f/
navbar center
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
/* center */
.nav1 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
text-align: center;
}
.navbar1 {
-webkit-align-self: center;
align-self: center;
}
li a:hover {
color: red;
cursor: pointer;
}
/* || center */
<div class="nav1">
<h1>Brian Funderburke Photography & Design</h1>
</div>
<div class="nav nav1">
<ul class="navbar navbar1">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Your code appears to already be working from what I can tell (though you were missing a closing </div> in your example). Make sure your CSS is being properly imported and applied.
Here is a working example to prove it is looking okay: http://jsfiddle.net/611mbvtu/