I'm trying to make my logo on my navbar be centered and the other items of the navbar be around it. Currently the logo is in the center of the text items where it should be but I cannot get the whole logo with the text around it to center.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Charity</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='nav'>
<ul class='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Events</a></li>
</ul>
<img src="images/main-logo.png" id="logo" />
<ul class="navigation">
<li><a href='#'>Full list of Charities</a></li>
</ul>
</div><!-- end of nav -->
</body>
</html>
The css
html, body {
padding: 0;
margin: 0;
}
#logo {
float: left;
margin:auto;
}
#nav {
margin:auto;
background-color: #CCC;
height: 66px;
box-shadow: 0px 1px 10px #5E5E5E;
}
.navigation {
list-style-type: none;
float: left;
}
li {
display: inline;
padding: 15px;
margin:auto;
}
#nav a {
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
font-weight: bold;
font-family: century gothic;
text-decoration: none;
color: #262626;
opacity: 0.26;
}
#nav a:hover {
opacity: 0.36;
}
If the point is to center the image between the li items, just make it an item also:
<div id='nav'>
<ul class='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Events</a></li>
<li><img src="images/main-logo.png" id="logo" /></li>
<li><a href='#'>Full list of Charities</a></li>
</ul>
</div>
!!! Don't forget to remove the #logo style !!!
Check it out: http://jsfiddle.net/QUkPj/
In order for margins to work on an image, you need to declare display:block on them. img tags by default are displayed as inline elements (and margin will not do anything to inline elements).
See here: http://jsfiddle.net/9xtea/1/
because you want to center the logo and have the rest of the elements aligned to left and right of that, you'll need to use position absolute:
#logo { position: absolute; top: 0; left: 50%; margin-left: -??px; } /* negative margin half the width of the logo */
.navigation-left { list-style-type: none; position: absolute; right: 50%; margin-right: ??px } /* positive margin half the width of the logo */
.navigation-right { list-style-type: none; position: absolute; left: 50%; margin-left: ??px } /* positive margin half the width of the logo */
this centers the logo in the nav bar and then puts the left and right menu options around it regardless of their size
http://jsfiddle.net/EWf56/
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I want to have only the first element of the navbar on the left of and the others centered.
What am I missing?
.nav {
padding: 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 20px;
color: #dfd1d1;
}
/* trying to use the below to put the logo on the left but not working */
.nav li:first-child {
text-align: left;
}
.nav :first-child {
text-align: left;
}
.nav li:first-of-type {
text-align: left;
}
.header {
padding: 25px 10px 25px 10px;
background-color: rgb(17, 140, 206);
}
.main-content {
padding: 25px;
background-color: rgb(152, 158, 160);
margin: 30px auto 0 auto;
}
h1 {
text-align: center;
}
<div class="header">
<ul class="nav">
<li> Logo</li>
<li> Home</li>
<li> Price</li>
<li> About / Contacts</li>
<li> Home</li>
</ul>
</div>
This could be one possible solution:
I've put the first element of the nav to the left with a position: absolute and made sure its parent (the nav) has a position:relative.
.nav {
position: relative;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 20px;
color: #dfd1d1;
}
.header {
position: relative;
padding: 25px 10px 25px 10px;
background-color: rgb(17, 140, 206);
}
.main-content {
padding: 25px;
background-color: rgb(152, 158, 160);
margin: 30px auto 0 auto;
}
h1 {
text-align: center;
}
.logo {
position: absolute;
left: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<ul class="nav">
<li class="logo"> Logo</li>
<li> Home</li>
<li> Price</li>
<li> About / Contacts</li>
<li> Home</li>
</ul>
</div>
Separate the logo form the main navigation and make it position: absolute; while centering it vertically with top: 50%; and a transform: translateY(-50%); property. Then add position: relative; to the .header class to contain the absolute positioned element. This will ensure it stays center regardless of the size.
See my example.
.header {
position: relative;
padding: 20px;
background-color: rgb(17, 140, 206);
}
.nav {
text-align: center;
}
.nav li {
display: inline;
padding-right: 20px;
color: #dfd1d1;
}
.logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.logo span {
color: #dfd1d1;
}
.main-content {
padding: 25px;
background-color: rgb(152, 158, 160);
margin: 30px auto 0 auto;
}
h1 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="logo">
<span> Logo </span>
</div>
<ul class="nav">
<li> Home </li>
<li> Price </li>
<li> About / Contacts </li>
<li> Home </li>
</ul>
</div>
Why does this work?
Setting the top to 50% vertically centers the absolute element on it's relative parent. However this centers the element based on it's top border. To center the middle we will transform the element based on 50% of the absolute elements height. Then ta-da, it's vertically center regardless of any height change.
When I am trying to set the relative position of "ul" element nested under
div with id nav , it is adding Horizontal Scroll Bar on Web Page. Please help
to understand the reason for this & solution for this. Basically I want to bring the Navigation menu in centre of screen.
<!DOCTYPE html>
<html>
<head>
<title>TESTING PAGE</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 100px;
}
#nav ul li {
display: inline;
}
</style>
</head>
<body>
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
The reason it overflows is because if you do not explicitly apply a value for the display property of ul, the value defaults to block.
Elements with display: block; take up 100% width, so, since you move the element 100px to the right, #nav ul will overflow the document by 100px.
You can test this by applying a border to ul and then try changing its display property to, say, inline for example.
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 100px;
border: solid red 1px;
/* try un-commenting this and see what happens!
display: inline;
*/
}
#nav ul li {
display: inline;
}
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
And if you would like to move the ul element to the center of #nav, then simply add left: 50%; transform: translateX(-50%); to #nav ul.
Transform Translate positions an element relative to itself, so, if an element's width is 100px and you apply that specific transform, it will reposition that element 50px (half of its own width) to the left of its current left position.
It should be noted that you should also apply a padding-left: 0 to #nav ul since ul elements by default have padding applied to them.
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
#nav ul {
list-style-type: none;
position: relative;
left: 50%;
transform: translateX(-50%);
border: solid red 1px;
display: inline-block;
margin: 0 auto; /* to remove the default top & bottom margins for inline-blocks */
padding-left: 0; /* to remove the default padding-left for ULs */
}
#nav ul li {
display: inline;
}
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
Here is a solution to your problem:
body {
margin: 0;
padding: 0;
}
#nav {
background-color: black;
color: white;
}
li {
display: inline;
}
ul{
padding-left: 0px;
display: wrap;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTING PAGE</title>
</head>
<body>
<h1>NAVIGATION BAR</h1>
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Use display: wrap; property for the ul along with text-align: center;. This way they get aligned to the center without the need to add additional hard coded left: 100px; which is added in your code.
My website has a vertical navigation bar to the left, so when I center text it is centered but not centered in the green section.
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 300px;
background:#6495ED;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color:#27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Code is here. http://pastebin.com/xgvt4P0a
Here is the image the text is centered, but not centered in the green section. https://imgur.com/kkDlnik
Thanks!
You are using wrong HTML, So i will not go any forward.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body bgcolor="#81F781">
<div id="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="content">
<h1> Informational Tech Site</h1>
<div>
</body>
</html>
You have specified an absolute width to your sidebar, which in general is fine. But your <h1> is declared outside of your sidebar container (which, as already said, has a fixed width). To put your <h1> into the center, just specify a padding-left: 300px; (as already mentioned a few times by others in here) to your <h1> or, and that's more responsive for future purposes, wrap your sidebar and <h1> inside a parental container, so your sidebar and <h1> will automatically fit into that parent container. While doing so, using text-align: center; on your <h1> should work without a padding.
As per you code add margin-left:300px; to h1 will make your h1 in proper center.
Because your sidebar is fixed and having width:300px.
And why your have h1 in head section.
.sidebar {
position: fixed;
height: 100%;
left: 0;
top: 0px;
width: 300px;
background: #6495ED;
}
h1 {
text-align: center;
margin-left: 300px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #6495ED;
}
li a {
display: block;
color: #000000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-size: 50px;
font-family: "Verdana", Geneva, sans-serif;
}
li a:hover {
background-color: #27C0FD;
color: #000000;
}
<html>
<link rel="stylesheet" type="text/css" href="css.css">
<body bgcolor="#81F781">
<head>
<h1> Informational Tech Site</h1>
</head>
<body>
<div class="sidebar">
<ul>
<li>Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
Fiddle
Add padding-left:300px to body
This is something to do with layouts.
Anyhow, as your side bar width is 300px and fixed positioned, you could just add padding-left:300px to body, so any content added will be aligned into the green place.
Here you go:
.sidebar {
position: fixed;
height:100%;
left: 0;
top: 0px;
width: 25%;
background:#6495ED;
}
#Content {
width: 75%;
float: right;
}
jsFiddle
You need another div to put h1 to it then use percentage for width of both divs, mean new div called content and sidebar. your issue is h1 got full width of your page because your sidebar has fixed position and you need to use percentage width to keep them equal. just a float: right for content and width: 75%; and 25% width for sidebar will solve your problem.
First, your elements isn't sorting well, you have to write the <h1> inside the <body> tag not in <head>
To center the h1 you have to add 300px padding in left, because your 'fixed' positioning sidebar isn't take physical place in body canvas, so, if you're using 'fixed' or 'absolute' positioning it's not taking effect in positioning of other elements.
Use following css for .sldebar rule:
.sidebar {
position: fixed;
height: 100%;
left: 50%;
top: 0px;
width: 300px;
background: #6495ED;
transform: translateX(-50%);
}
I made a simple webpage with header and navbar, but I came across this little problem that's actually pretty annoying. The links aren't 100% in the middle of the inline list, here's a screenshot:
https://i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png
To prevent confusion, the whole page is centered, but the screenshot is just of the navbar part.
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Test website</h1>
<div id="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</div>
</body>
</html>
The CSS file:
/* navigation bar */
#nav {
width: 490px;
margin: auto;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
/* unordered list in navbar */
#nav ul {
text-align: center;
}
/* list items in navbar */
#nav li {
display: inline-block;
}
/* links in items of navbar */
#nav li a {
text-decoration: none;
margin: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* header 1 */
h1 {
text-align: center;
font-family: Arial, sans-serif;
font-weight: bold;
}
The issue is the default padding that is being applied to the ul, simply zero out the padding:
#nav ul {
text-align: center;
padding:0;
}
JSFiddle
Just remove the padding and margin from the UL:
#nav ul {
text-align: center;
padding: 0;
margin: 0;
}
Above answer is correct, but in ideal scenario <a> should have padding so in future if we want to have a background-color for link, it will occupied entire block.
http://jsfiddle.net/5Lu5qjux/
I know there are a lot of other answers out there, but I don't know if Im just doing something wrong, but they aren't working.
Basically, I have a "logo" (it's just my name) in a div("name") on the left hand side of a container div("header"). I also have my navbar links on the right of the name div, which are in the "nav" div.
The issue is that the nav div is actually floating to the top of the header div, while the name div is perfectly centered. A picture:
This is my HTML file:
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Toby Caulk</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<div id="header">
<header>
<div id="name">
<h1>Toby Caulk</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
</body>
</html>
And the CSS:
*{
font-family: monospace;
}
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: rgb(245, 245, 245);
box-shadow: 0px 10px 5px #888888;
}
#name {
float: left;
font-size: 20px;
margin-left: 20px;
}
#nav {
float: left;
}
nav ul li {
display: inline-block;
}
nav ul {
padding: 0;
list-style-type: none;
}
nav li {
font-weight: 150;
font-size: 24px;
}
What I want is for the nav div to be centered vertically inside of the header div, just like the name div is doing. How do I do this?
See comments and the properties I added to #name
*{
font-family: monospace;
}
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: rgb(245, 245, 245);
box-shadow: 0px 10px 5px #888888;
}
#name {
font-size: 20px;
margin-left: 20px;
display: inline-block; /* Ensures that #name and #name aligns side by side */
line-height: 100%; /* Makes to ensure vertical centering */
vertical-align: middle; /* Makes sure it's centered vertically */
}
#nav {
display: inline-block;
}
nav li {
font-weight: 150;
font-size: 24px;
display: inline-block; /* You can align them without using float */
}
<div id="header">
<header>
<div id="name">
<h1>Toby Caulk</h1>
</div>
<div id="nav">
<nav>
<ul>
<li>Home</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>