Taking this example as starting point, I am trying to create a navigation bar with a left-aligned and a right-aligned section, ensuring vertical alignment into middle for all the elements inside it.
Unfortunately, the right part is not vertically centered, even if right-aligned and left-aligned classes have both the vertical-align: middle property set. What do I am missing? Here is the code bunch:
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
vertical-align: middle;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
}
.left-aligned {
float: left;
}
.right-aligned {
float: right;
}
<html>
<body>
<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
About Us
</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
This is a great use case for flexbox - by adding the following three lines to your container class, you can achieve a left and right aligned section:
display: flex;
justify-content: space-between;
align-items: center;
So your final code will look like this (I've separated HTML and CSS for legibility):
header img {
display: inline-block;
}
header nav {
display: inline-block;
font-size: 1em;
}
header nav ul {
padding: 0;
margin: 0;
}
header nav ul img {
vertical-align: middle;
}
header nav li {
display: inline-block;
}
header nav li a {
display: inline-block;
padding: .4em .8em;
font-size: 1em;
text-decoration: none;
color: black;
background: #eee;
line-height: 1;
}
header .container {
max-width: 800px;
margin: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
<header role="banner">
<div class="container">
<div class="left-aligned">
<img class="left" src="http://placehold.it/200x200">
</div>
<div class="right-aligned">
<nav id="navigation" role="navigation">
<ul>
<li>
<img src="http://placehold.it/100x100">
About Us
</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
This justifies the direct children of the flexbox to horizontally align left and right with space in between. If more than two elements were to exist, they would be placed with equal spacing across the width of the container.
Align items will determine the vertical alignment of elements inside the flexbox.
This is true when flex-direction is not set (default value - row). When flex-direction is set to column, the "axis" affected by justify and align are reversed.
Related
I'm trying to vertically align the navbar with my website logo and header, but whenever I try to use display: inline-block; and vertical-align: middle; on the , , and tags (which are all in the same div on the top of my website), the navbar goes from horizontal to vertical which is not what I want. I'm also using Bootstrap 4.
Here's my html:
<div id="home">
<div class="page-header">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="images/test-logo.png">
<h1>Rigid Signs</h1>
</div>
<div class="col-md-8">
<ul class="nav">
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
and here's my CSS:
#home {
background: url('../images/workshop-testphoto.jpg') no-repeat center / cover;
height: 844px;
}
.page-header {
background: rgba(0,0,0,.6);
postion: fixed;/*not working*/
padding: 11px 0;
}
.page-header img, .page-header h1 {
display: inline-block;
vertical-align: middle;
}
.page-header img {
width: 88px;
}
.page-header h1 {
font-size: 32px;
color: white;
margin-left: 11px;
}
.page-header .nav {
float: right;
}
.page-header .nav li a {
display: inline-block;
font-size: 22px;
text-decoration: none;
color: #fff;
}
I'm not very good with bootstrap 4, but if anyone knows how I could use bootstrap 4 to also achieve my goal of vertically aligning all elements in my navbar, that would be great aswell
If I'm not wrong, bootstrap grid have "float" styling in it. so col-md-4 and col-md-8 will have float left. so, use inline-block instead of float, and give vertical-align middle for both div. using the current html you're showing, it will be
.row {
font-size: 0; /*to remove blank space between two inline-block element*/
}
.col-md-4, .col-md-8 {
float: none;
display: inline-block;
vertical-align: middle
}
so my issue is that my navbar wont display in the center of the screen (horizontally) and I dont understand why, this is something I have regular issues with so if you could help it would be greatly appreciated. Heres a link to the code
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
#logo {
display: block;
margin: 0 auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
}
<body>
<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>About The Rally</li>
<li>Our Car</li>
<li>Charities</li>
<li>Sponsors</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
Ideally you should have some header css to center it's contents, then you could align the nav li s any which way you want. I created a fiddle (same as snippet) to demonstrate, and added padding to the li elements (or else they'd have been all squished together)
Hope this helps.
body {
width: 100%;
margin: 0;
padding: 0;
}
/*******************
HEADER
*******************/
header {
display: block;
margin: 0 auto max-height: 20em;
}
#logo {
display: block;
margin:auto;
height: 14em;
}
#name {
text-align: center;
}
/*******************
NAV BAR
*******************/
/*nav{text-align:center;}*/
nav ul {
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav li {
float: left;
display: inline-block;
padding-right: 7px;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
}
<header>
<img id="logo" src="img/under-construction.png" />
<h1 id="name">Team Kangoo Anywhere</h1>
<nav>
<ul>
<li>
Home</li>
<li>
About Us</li>
<li>
About The Rally</li>
<li>
Our Car</li>
<li>
Charities</li>
<li>
Sponsors</li>
<li>
Contact Us</li>
</ul>
</nav>
</header>
Change
nav li {
float: left;
display: inline-block;
}
to
nav li {
// Remove float
display: inline-block;
}
Add a wrapper to the nav using a div tag, make the nav display inline and use text-align on the div.
<div style="text-align:center"><nav style="display:inline-block">
... and then google Bootstrap
After removing the float: left you can use display: flex for <ul> or display: inline for it's children <li>s.
And you have an unwanted left padding in the <ul> that it is better to remove it to make real center.
ul { margin: 0; padding: 0; }
You can have a look at this post.
I want to center <h1> or <div class="heading"> on the page. The only solution I have found is
body { text-align: center; }
but I can't figure it out why this code doesn't work. Display: inline-block is used because I want the border to wrap around my .
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
display: inline-block;
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
Add this:
.heading {
text-align: center;
}
...and delete display: inline-block from .heading. Instead, add this
.heading h1 {
display: inline-block;
}
.heading is the container of your h1. Both are by default 100% wide. This centers the inline-block h1 inside the full-width .heading
The secret you are looking for is to use a block-level element, and also set a margin: 0 auto. This tells the block to centralise, much like a standard text-align: center.
.header {
display: block;
margin: 0 auto;
}
By default, block-level elements occupy 100% of the width of their container, so you might also want to specify a width for the header. Alternatively, you can have the header automatically adjust to the size of the text by adding a container div that is set as in inline-block, and moving the border to there:
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: block;
margin: 0 auto;
text-align: center;
}
.heading-wrapper {
display: inline-block;
border: 2px solid black;
padding: 0 10px;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<div class="heading-wrapper">
<h1>heading</h1>
</div>
</div>
</header>
This way, the header will stay centralised, and have the border automatically expand correctly to accommodate the header, no matter how much text there is.
Hope this helps! :)
You can center it by using display: flex; justify-content; on the parent element. Here is a great resource on centering things https://www.w3.org/Style/Examples/007/center.en.html
body {
margin: 0;
}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
display: flex;
justify-content: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
a div displays block by default, so it's definitely important to declare if you want to display it otherwise.
However, again, as in another post i saw earlier, you have no css for the containing parent, the header, which would greatly assist you. You should apply any margin to be inherited to this, and there should be no need to apply a small width to your div.
body {
margin: 0;
}
header{margin: 0 auto;}
.navbar {
text-align: right;
background: black;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
display: inline-block;
}
.heading {
border: 2px solid black;
/*display: block; - even if you leave this out, it will display as block*/
text-align: center;
}
<header>
<nav class="navbar">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
<div class="heading">
<h1>heading</h1>
</div>
</header>
How do you make a navigation with five links, with one of the links being an image (the logo) which needs to be centered?
My HTML:
<nav>
<ul>
<span>
<li>Restaurants</li>
<li>About</li>
</span>
<li><img src="img/logo.svg" alt="Posthusets logo i hvid format" class="nav-logo"></li>
<span>
<li>TakeAway</li>
<li>Contact</li>
</span>
</ul>
</nav>
nav {
display: flex;
}
nav>* {
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
}
<nav>
<span>
Restaurants
About
</span>
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50">
<span>
TakeAway
Contact
</span>
</nav>
jsFiddle
You can use flex-grow on li elements
*{
padding: 0;
margin: 0;
}
ul{
width: 100%;
display: inline-flex;
flex-direction: row;
list-style-type: none;
}
li{
height: 50px;
line-height: 50px;
text-align: center;
flex-grow: 1;
}
https://jsfiddle.net/orzo8d2t/
(note that I removed span theree)
If anyone is still needing help, here's how I'd go about accomplishing this. This works better responsively because as the screen gets wider, the gaps in-between each navigation item does not increase, it stays consistent. (At mobile you can hide this menu and show your mobile menu).
HTML:
<div class="container">
<div class="navbar">
<ul>
<li>Restaurants</li>
<li>About</li>
<li><img width="200px" src="images/logo.png"/></li>
<li>TakeAway</li>
<li>Contact</li>
</ul>
</div>
CSS:
.container {
width: 100%;
}
.navbar {
width: 100%;
margin: 0 auto;
text-align: center;
background-color: #000;
padding-top: 30px;
padding-bottom: 30px;
}
.navbar li {
list-style: none;
display: inline-block;
margin-right: 45px;
color: #fff;
vertical-align: middle;
}
.navbar li:nth-child(5) {
margin-right: 0px;
}
I searched Stack overflow and google and tried all the suggestions to getting my h1 and nav on the same line. I tried inline, inline-block, setting the header itself to 100%. It's just not aligning. On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning. here's my code
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
float: left;
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav li{
float: right;
display: inline-block;
color: #ffffff;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2
<p>Today's Try It Recipe!<p>
</div>
</div>
display: flex; justify-content: space-between; will put them on the same line and separate them with the available space.
.header {
background-color: #00001a;
padding: 0 1em;
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
}
.header h1 {
color: #ffffff;
font-size: 15px;
}
.nav li {
color: #ffffff;
display: inline-block;
}
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
Put the heading and the navigation in their own containers. Float one left, the other right, and make sure to clear them afterwards.
header {
background-color: #00001a;
padding: 0px 10px;
box-sizing: border-box;
}
h1 {
color: white;
margin: 5px 0;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
color: white;
margin-left: 20px;
}
<header>
<div class="left">
<h1>
EaTogether
</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</div>
<div class="clear"></div>
</header>
Note: I've changed "Togeter" to "Together", assuming it was a typo.
I am not sure if you want this thing but I just gave a try,
For this, set float:right to ul element and not on li elements.
Since you want to align h1 and li content set line-height to 0.5 for ul element
please check this fiddle: https://jsfiddle.net/hz0104mp/
<div class="header">
<div class="nav">
<h1>EaTogeter</h1>
<ul>
<li>home</li>
<li>About</li>
<li>Couples</li>
<li>family</li>
</ul>
</div>
</div>
<div class="Maincontent">
<div class="container">
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</div>
</div>
.header{
background-color: #00001a;
height: 40px;
width: 100%;
}
ul{
list-style-type: none;
}
.header h1{
color: #ffffff;
font-size: 15px;
display: inline-block;
}
.nav ul{
float:right;
line-height:0.5;
}
.nav li{
display: inline-block;
color: #ffffff;
}
I like the flexbox method mentioned by #Michael Coker but here's a solution using floats as the OP attempted to do.
You were on the right track but might have been applying some of your CSS to the wrong elements for the wrong reasons.
On top of that my li posted backwards when I set it to float left so the home that was on the top of the list is now on the outer end instead of the beginning.
The reasons for this are not obvious until you break things down. The reason this happens is because float: right is applied to each element separately and in the order they appear in the markup, not as a whole. The browser will float Home as far to the right as it can. After that, it will move About as far to the right as it can. Rinse and repeat for any other li.
I rectified this by floating the ul instead of individual li and setting those to display: inline;. Floating the li to the left would also work.
header {
padding: 0 0.5rem;
height: 40px;
color: #ffffff;
background-color: #00001a;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header h1 {
margin: 0;
font-size: 15px;
display: inline-block;
}
header h1,
.nav li {
line-height: 40px;
}
.nav {
float: right;
}
.nav li {
padding: 0 0 0 0.25rem;
display: inline;
}
<header>
<h1>Eat Together</h1>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Couples</li>
<li>Family</li>
</ul>
</header>
<main>
<h2>Try It</h2>
<p>Today's Try It Recipe!<p>
</main>
Please note that I took a few liberties with your markup to help provide an example of how it can be more semantic and achieved with less markup (along with a few choice styles to make it a little more "pretty").