Just trying to figure out why this div won't center. If I can get this working, I'll be set.
JSFiddle
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width:60%;
text-align:center;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
}
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Every time I try to display it in the browser, it looks like this:
Also how do I stretch the navigation bar to 100%? Like from the very left of the page to the right?
You want to center a div without specified width. For that, first remove ul{width:60%;}, then add text-align:center to the Parent and display:inline-block to the Child :
#container{
text-align:center;
}
ul{
display:inline-block;
}
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
text-align:center;
display:inline-block;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
text-align:center;
}
<body>
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
1、delete margin: 0 auto;width:60%;from ul and add display: table;margin: 0 auto;like this：
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
/* margin: 0 auto;
width:60%; */
display: table;
margin: 0 auto;
}
2、delete margin: 0 auto;width:60%;from ul and add ‘text-align: center’ in #container，‘display: inline-block’ in ul like this:
#container{
width:100%;
text-align: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
display: inline-block;
}
3、
#container{
width:100%;
position: relative;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
4、
#container{
width:100%;
display: flex;
justify-content: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
}
5、
#container{
width:100%;
display: flex;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
}
may help you。
choose the best one for you project。
Is this what you are looking for?
All I did was moving the background color to the #container, removed the 60% width, and make the LI elements display: inline-block
ul li{
text-transform:uppercase;
display: inline-block;
}
https://jsfiddle.net/391sz22s/1/
Here is one way of doing it.
Set display: table to the ul element, which will give you a shrink-to-fit block level element that will then center using margin: 0 auto.
Set display: table-cell on the li elements.
The advantage of this approach is that the links will remain on a single line no matter how small you make the page width, which may be the desired effect for some designs.
You could set the with of the ul to 100%, but then your link elements would increase in width, which may not be what you want.
ul {
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width: auto;
display: table;
}
ul li {
text-transform:uppercase;
display: table-cell;
}
ul li a {
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover {
background-color:#7A991A;
}
#container {
width:100%;
}
<div id="container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Related
I'm having issues with centering the text in my navigation bar. I've tried everything I can think of. Any help would be greatly appreciated.
What I have here is my navigation bars html and css code. I have tried centering it and using other means but am still stuck.
hTML
<div class="content-outer" id="top_nav">
<div class="content-inner">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
margin:0;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
float:left;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; float:left; overflow:visible; }
.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible; position:relative; }
Is this what you are looking for?
I removed the extra divs; created a nav element; put margin: 0 auto; on the ul; replaced the float: left on the li with display: inline-block; and there you have it!
HTML
<nav id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</nav>
CSS
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
width: 100%;
}
#top_nav ul {
margin: 0 auto;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
Instead of giving just a margin-right for each li element like I can see in your code margin: 0 56px 0 0;, why you don't give equal margin left and right to each li tag?
For example: margin:0 34px 0 34px;
It could be a quick solution.
Check this DEMO:
http://jsfiddle.net/4n9hq/1/
Here is the answer in simplest form
<nav>
<ul>
<li>Home<li>
<li>Digital</li>
</ul>
</nav>
CSS
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
}
In conclusion: set the "ul" tag to display:block and then center text
How to center this thing ? I've tried couple ways but the nav. bar is not exactly in the middle of the site.
<style>
ul
{
background-color:red;
list-style-type:none;
}
li
{
float:left;
}
a
{
display:block;
text-decoration:none;
width:80px;
padding:20px;
text-align:center;
}
a:link
{
background-color:red;
}
a:hover
{
background-color:white;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Guys it works, the navbar is now centered correctly, but the text is not this time.
.......................
padding:0 to ul solves the problem.
thank you guys
Try this:
Remove float:left; and add display:inline-block; to li.
Add text-align: center; margin:0 auto; and a width to ul.
Change to this:
ul {
background-color:red;
list-style-type:none;
text-align: center;
margin: 0 auto;
width:80%;
}
li {
display: inline-block;
}
JSFiddle Demo
You can modify you CSS as following:
ul {
background-color:red;
list-style-type:none;
text-align: center;
margin-left: auto;
margin-right: auto;
width:80%;
}
li { display: inline-block;}
a {
display:block;
text-decoration:none;
width:80px;
padding:20px;
text-align:center;
}
a:link {background-color:red;}
a:hover { background-color:white;}
Notice 4 important lines added:
text-align: center;
margin-left: auto;
margin-right: auto;
width:80%; - set the desirable width if not 100%
width can be also specified in absolute units, like e.g. width:800px; alternatively, 2nd and 3rd lines can be replaced with a single statement: margin: 0 auto;
Demo: http://jsfiddle.net/e2TUC/
Hope this will help. Regards,
I am trying to center then float:right my top fixed navbar with the content area of my page. Currently the navbar is floated right but is not centered with my content area.
Click to view my subject site.
CSS
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
padding-top:5px;
text-align:right;
float:right;
position:relative;
margin:0 auto;
width:980px;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
HTML
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
My first guess is the width of ul element doesn't work.
Try this instead
<div id="topribbon">
<div class="ribbonwrapper" style="width:980px;margin:0 auto;">
<ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>+1-800-555-5555</li>
</ul>
</div>
</div>
Put the style of .ribbonwrapper into CSS to make the code tidy :) then you can remove irrelevant width & margin property of #topribbon ul
I'm not sure I'm entirely clear on what you're trying to do, but if what you want is to float:right the UL and then have all the LI's within it centered, you could do this:
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
Be sure to remove the float:right; from the li style block.
If you mean something else by "centered with my content area" can you explain more?
Try with float:none; on the #topribbon ul
Pretty confused what you mean exactly myself... Maybe this is what you want? jsFiddle
#topribbon {
width: 100%;
background-color: #AA1119;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
overflow:hidden;
}
#topribbon ul {
padding:10px 0 8px;
position:relative;
margin:0 auto;
width:980px;
background:red;
overflow:hidden;
}
#topribbon ul li {
color:white;
list-style:none;
display:inline-block;
line-height:20px;
cursor:pointer;
width:auto;
padding:0 10px 0 10px;
float:right;
}
#topribbon ul li:hover {
color:#5C8FA5;
}
like others have said use the ul below. I am just as stumped as you however, I am new so if my code is wrong then please feel free to tell me. Thanks
#topribbon ul { float:right; text-align: center; }
#topribbon ul li { display: inline-block; }
how do i make the center like the links are all off to the left i want them to be center top of the web page... any help?? i have done this before but i dont rember how
CSS:
body {
background: #B0FFF5
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left; /*supposed to be there */
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#3B5998;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ffffff;
color:#3B5998;
}
HTML:
<body>
<ul>
<li>Home</li>
<li>Fb Fame</li>
<li>Donate</li>
<li>Facebook</li>
</ul>
</body>
If you want the buttons to line up, no matter what the window size is, set a fixed width and margin: 0 auto:
ul
{
width: 512px;
margin:0 auto;
}
Here is a demo.
Alternatively remove the whitespace between the list items (or use another technique), set their display to inline-block and give the container a text-align: center:
ul
{
margin:0;
text-align: center;
}
li
{
display: inline-block;
}
Here is a demo.
ul
{
list-style-type:none;
margin:0;
padding:0;
width: 400px;
margin: 0 auto;
}
Hope this helps.
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
i remberd how to do it sorry folks
I'm having a total brain fart and can't figure out how to display my title/logo and navigation on the same line in my html code. I want the title/logo to be on the left and the nav to be on the right.
Here's my HTML:
<div class="header">
<div class="title">
<h1>Homegrown</h1>
</div><!--/.title-->
<nav class="nav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav><!--/.nav-->
</div><!--/.header-->
Here's my CSS:
.title {display:inline; float:left; margin:0 auto;}
.nav {
display:inline;
float:left;
width:100%;
margin:0 1.7%;
padding:25px 2%;
margin-bottom:0;
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}
For the .nav selector remove width: 100%; , change float: left to float: right and (if you want) change padding:25px 2%; into padding:0 2%;
.nav {
display: inline;
float: right;
/*width:100%;*/
margin: 0 1.7%;
/*padding:25px 2%;*/
padding: 0 2%;
margin-bottom: 0;
}
Demo: http://jsfiddle.net/4svrN/
Remove the padding will work
Demo http://jsfiddle.net/vFgke/
.title {display:inline; float:left; margin:0 auto;}
.nav {
display:inline;
float:right;
margin:0 1.7%;
margin-bottom:0;
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}
Try
body {
width: 100%;
}
.title {
display:inline;
float:left;
margin:0 auto;
}
.nav {
display: inline;
float: right;
padding: 25px 2%;
}
}
ul {display:inline; float:right; list-style:none;}
li {display:inline;}