I am having a problem making my logo and links align vertically. I have tried to achieve this using inline block and vertical-align set to middle but it didn't work.
I know I can achieve this using flex box. But I don't want to use flex box. And if I must use flex, is flex box better in achieving proper alignment?
Please any help will be appreciated.
.header {
padding: 20px;
background: #000;
color: #fff;
}
.logo,
ul {
display: inline-block;
vertical-align: middle;
}
ul {
list-style: none;
float: right;
}
ul li {
display: inline-block;
}
<div class="header">
<div class="logo">XCode</div>
<ul>
<li>Account settings</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div>
In many browsers, the ul element comes with default top and bottom margins.
Chrome:
Those margins are throwing off the vertical centering. Just remove them.
.header {
padding: 20px;
background: #000;
color: #fff;
}
.logo, ul {
display: inline-block;
vertical-align: middle;
}
ul {
margin: 0; /* NEW */
list-style: none;
float: right;
}
ul li {
display: inline-block;
}
<div class="header">
<div class="logo">XCode</div>
<ul>
<li>Account settings</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div>
In some browsers, the <ul> element has margin by default.
Try
ul {
list-style: none;
float: right;
margin: 0;
}
to remove the default margins.
ul {
list-style: none;
float: right;
margin:0 auto;
}
margin:0 auto; will help you to set the ul element in vertically align.
.header {
padding: 20px;
background: #000;
color: #fff;
}
.logo,
ul {
display: inline-block;
vertical-align: middle;
}
ul {
list-style: none;
float: right;
margin:0 auto;
}
ul li {
display: inline-block;
}
<div class="header">
<div class="logo">XCode</div>
<ul>
<li>Account settings</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div>
You might check out Bulma, specifically their Level attribute. This uses flexbox in the background, but you don't have to learn it- just the easy-to-use classes!
<!-- Main container -->
<nav class="level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">Content</p>
</div>
</div>
<!-- Right side -->
<div class="level-right">
<p class="level-item">More Content</p>
<p class="level-item"><a class="button is-success">New</a></p>
</div>
</nav>
margin: 0; will help you.
ul {
list-style: none;
float: right;
margin: 0;
}
https://jsfiddle.net/n0o915w3/1/
Related
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.
I was wondering how I would get 2 divs in one div
html {
margin: auto;
width: 960px;
height: auto;
}
#navbar {
height: 90px;
background-color: #080808 !important;
display: block;
}
.logo {
padding-left: 31px;
height: 90px !important;
width: 90px !important;
}
.navitems li,
.navitems ul {
list-style-type: none;
display: inline-block;
}
.navitems {
float: right;
}
<div id="navbar">
<div class="logo">
<img src="images/logo.png" alt="" width="90px" height="90px">
</div>
<div class="navitems">
<li>
<ul>Home</ul>
<ul>Contact Us</ul>
<ul>About</ul>
</li>
</div>
</div>
It's probably better to use flex.
Set "display: flex" and "justify-content: space-between" on the parent element (navigator). I also changed the image to just have a background color that stands out.
html {
margin: auto;
width: 960px;
height: auto;
}
#navbar {
height: 90px;
background-color: #080808 !important;
display: flex;
justify-content: space-between;
}
img {
background-color: #0ff;
}
.logo {
padding-left: 31px;
height: 90px !important;
width: 90px !important;
}
.navitems li,
.navitems ul {
list-style-type: none;
display: inline-block;
}
<div id="navbar">
<div class="logo">
<img width="90px" height="90px">
</div>
<div class="navitems">
<li>
<ul>Home</ul>
<ul>Contact Us</ul>
<ul>About</ul>
</li>
</div>
</div>
More on flex properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If using float, the floating items must be placed before "regular" (non-floating) items in the DOM tree. In this instance, you would want to move your <div class="navitems"> before <div class="logo">. Also, you might want to permutate your <ul> and <li> tags. <ul> contains <li>s, not the other way around. ;)
The 2 divs are in 1 div only but the fact is float property does not changes the flow .Floated elements remain a part of the flow of the web page unlike absolute and fixed positioning so place the div class="navitems" above the div class="logo".Moreover interchange the ul and li you have used them incorrectly conceptually although it doesnt make any difference visually
First, use display: inline-block; on those two DIVs. Also, use vertical-align: middle; on both to align them vertically centered to their container.
But there a mistake in your code: ul and li should be used the other way round, the lis are inside the ul . And also note that list-style-type: none; is only assigned to the ul, and display: inline-block; only to the li elements.
#navbar {
height: 90px;
background-color: #080808 !important;
display: block;
}
.logo {
display: inline-block;
padding-left: 31px;
height: 90px !important;
width: 90px !important;
vertical-align: middle;
}
.navitems {
display: inline-block;
vertical-align: middle;
}
.navitems ul {
list-style-type: none;
}
.navitems li {
display: inline-block;
margin-right: 4em;
}
<div id="navbar">
<div class="logo">
<img src="http://placehold.it/90x90/fb4" alt="" width="90px" height="90px">
</div>
<div class="navitems">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</div>
</div>
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>
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").