I'm trying to centralize my nav bar, I've tried text align center, and margin auto, but it stays fixed to the left. I also tried to add a width, but still it stays fixed. Thanks in advance for your help. Please check out the JSFIDDLE. The HTML is as follows:
<section class="contain">
<div id="section-nav" class="section-nav">
<div class="top">
<ul>
<li class="logo">Magna Contra</li>
<li class="active">Festival: Paris</li>
<li>Festival: Paris</li>
<li>Festival: Paris</li>
<li>Festival: Paris</li>
</ul>
</div>
</section>
And the CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
padding:15px;
text-align: center;
margin: auto 0;
}
li a{
text-decoration: none;
color:#bbbbbb;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 0.78em;
letter-spacing: .2em}
li a:hover{
color:white;
}
.logo a{
color:#bbb;
font-size: 0.78em;
text-decoration: none;
text-transform: uppercase;
}
.logo a:hover{
color:white;
}
.active a{
color:white;
}
.container {
display: table;
width:980px;
height: 100%;
}
.contain{
display: table;
width: 100%;
text-align: center;
margin: 0 auto;
}
.block {
display: table-row;
height: 1px;
}
.navigation {
display: inline-block;
padding: 10px;
width:100%;
margin: auto;
height: 150px;
}
.top {
background-color: #444;
width:100%;
display: inline-block;
padding: 10px;
text-align: left;
}
.navigation:nth-child(odd) {
background: #222;
}
.push {
height: auto;
}
.container {
margin: 0 auto;
text-align: center;
}
.block:nth-child(odd) {
background: #fff;
}
.search {
border:0px;
background-color:transparent;
color:white;
display: inline-block;
height:28px;
}
.section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
.section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}
The easiest option is to add text-align: center to the ul:
ul
{
list-style-type:none;
margin:0;
padding:0;
text-align: center;
}
I would also set the lis to display: inline-block to give you more control over their styling.
Your div "section-nav" is not closed. I would fix this first.
You have also applied text-align:left to your .top div, which is the main container for the navigation buttons.
In the given fiddle you have
.top {
text-align: left;
}
change it to
.top {
text-align: center
}
fidd ->http://jsfiddle.net/ztyUF/2/ Is this what u ve asked?
I used this when I had the same problem and have pretty much duplicated it for multiple sites. He explains it much better than I can.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Related
Looking for a little help with a project, I am trying to get a nav bar centered inside a header with a logo on the left.
HTML
<header>
<img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
<div id="nav">
<span>Home</span>
<span><button>Televeisions</button></span>
<span>Electronics</span>
<span>Services</span>
</div>
</header>
CSS
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
}
#nav {
width: 100%;
text-align: center;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
JSFiddle
Your nav width 100% is forcing the nav below the image. I added overflow: hidden to the header, floated the img left, and put a margin-top on the #nav.
Adjust your CSS to something like this:
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
overflow: hidden;
}
img {
float: left;
}
#nav {
width: 600px;
text-align: center;
margin-top: 2.5em;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
You can adjust the margin, etc. to style how you want from there on out.
Codepen: http://codepen.io/Tambe257/pen/XdGdLZ
Use positioning on your parent element and your child elements that will be nested inside. Here's a quick example
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
position:relative;
}
#nav {
width: 100%;
text-align: center;
top:2em;
position:absolute;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
so this is how my navigation looks:
Quite unbalanced right.. my minds kinda fkd up. I have no idea what I am doing already. I'd like to ask some help how to center it out. This is the code of the css:
.navigation {
width: 886px;
height: 84px;
background: url('../img/nav_bg.png') no-repeat;
margin: 0 auto;
}
.navigation ul {
margin: 0;
padding: 0;
list-style: none outside;
padding-top: 22px;
padding-left: 63px;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Flexbox is not yet 100% supported cross-browser
As you can see from this link: http://caniuse.com/#feat=flexbox
Flebox nowadays is quite well supported but if you carefully look at those symbols on each square you notice that the support is not full but partial on some browsers (especially mobile).
Global (with prefix)
82.47% + 10.5% = 92.97%
unprefixed:
71.8% + 0.38% = 72.18%
You should to add a prefix if you really want to use it.
**
Using a different method - display:table;
**
On the other hand, I suggest you to use another approach which is much more stable and supported on all browsers:
Look at the support of display:table;
Link: http://caniuse.com/#search=display%3Atable
To solve your problem you can remove all your padding-top with fixed values and use vertical-align:middle and display:table-cell. This way no matter what is the height of the ul it will be always vertically centered.
Center horizontally the ul element using text-align:center;
Center vertically the ul by setting the .navigation container with display:table; and the ul element with display:table-cell; and vertical-align:middle;
Code example:
.navigation {
width: 100%;
height: 84px;
background: lightgrey;
margin: 0 auto;
display:table;
}
.navigation ul {
padding: 0;
list-style: none outside;
text-align:center;
display:table-cell;
vertical-align:middle;
}
.navigation ul li {
display: inline-block;
list-style-type: none;
}
.navigation ul li a {
display: block;
text-align: center;
line-height: 40px;
color: #fff;
text-decoration: none;
padding-left: 16px;
padding-right: 16px;
text-transform: uppercase;
font-size: 14px;
}
Check Jsfiddle: http://jsfiddle.net/a_incarnati/bmkspm69/1/
Flexbox might be able to help you here. To center your li's with flexbox all you would have to do is add these styles to .navigation ul
.navigation ul{
display:flex;
justify-content: center;
align-items:center;
}
Give a text-align: center to the ul.
In general, for centering some elements inside a parent, parent should have text-align:center and the childs should have display: inline-block or display: inline.
HTML:
<ul>
<li>A</li>
<li>B</li>
<ul>
CSS:
ul {
width: 400px;
text-align: center;
}
li {
display: inline-block;
}
I have found lots of ways to center a nav using tricks. Either by setting the line height and the height equal to each other or using vertical-align with display:table. It worked but my border always came at the bottom of the container rather than text.
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
display:block;
}
nav a{
height:100%;
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
To clarify the problem, I want to vertically center the text or the "a" tags within the header block. I would like to do this and also be able to put borders on the "a" tag where the border is close to the text.
You could use the table-cell display vertical-align approach.
* {
margin:0px;
padding:0px;
}
header {
display:table;
width: 100%;
height: 100px;
background-color:blue;
}
nav {
height:auto;
width:100%;
display:table-cell;
vertical-align: middle
}
nav a {
text-align:center;
display:inline-block;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
position: relative;
border-bottom: 3px solid blue;
}
nav a:hover {
border-bottom: 3px solid #F3008A;
}
<header>
<nav> Link
Link
Link
Link
</nav>
</header>
http://jsfiddle.net/wdabedbv/
You need to remove display:inline-block; and give line-height. It will solved your issue.
Check below your updated code:
*{
margin:0px;
padding:0px;
}
header{
display:block;
height:100px;
background-color:blue;
}
nav{
height:auto;
width:100%;
}
nav a{
height:100%;
text-align:center;
line-height:100px;
text-decoration:none;
color:black;
margin-left:25px;
font-size: 25px;
}
nav a:hover{
border-bottom: 3px solid #F3008A;
}
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
Try to use :Before as i did since your Height of the nav is fixed it wont be a problem.
Fiddle Link Demo
* {
margin: 0px;
padding: 0px;
}
header {
display: block;
height: 100px;
background-color: blue;
}
nav {
height: 100%;
width: 100%;
display: table;
}
nav a {
height: 100%;
text-align: center;
display: inline-block;
text-decoration: none;
color: black;
margin-left: 25px;
font-size: 25px;
display: table-cell;
vertical-align: middle;
}
nav a:hover:before {
background-color: #F3008A;
postion: absolute;
width: 50px;
content: "";
height: 3px;
position: absolute;
z-index: 4;
top: 64px;
}
<header>
<nav>
Link
Link
Link
Link
</nav>
</header>
I would assert that it is best to use flexbox since it is modern and responsive. The following will work nicely in all relatively modern browsers.
nav {
display: -webkit-flex;
display: flex;
}
nav > div {
background-color: pink;
height: 40px;
-webkit-flex: 1;
flex: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-contents: center;
justify-contents: center;
-webkit-align-items: center;
align-items: center;
}
nav > div:nth-child(odd) {
background-color: red;
}
nav > div > a {
text-align: center;
-webkit-flex: 1;
flex: 1;
}
<nav>
<div>hi</div>
<div>hi2</div>
<div>hi3</div>
</nav>
See this JSFiddle.
Here is a helpful guide with pictures.
I know there are a lot of answers with this subject but it still doesn't work somehow with my code.
Every time I try to center the text with text-align center it doesn't work unless I remove float: left, display: inline or display: inline-block. But then I have a vertical centered navigation bar...
Can anyone help me with this?
This is my HTML code:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Moviekids festivals</li>
</ul>
</div>
and here is the CSS code:
*{
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: arial;
background-color: white;
}
#wrapper{
width: 960px;
margin: 0 auto;
height: 100%;
text-align: left;
background-color: #1d1d1b;
}
.nav {
background-image:url("img/nav.jpg");
width: 100%;
height: 50px;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
text-align: center;
}
.nav a {
text-decoration: none;
display: inline-block;
color: #1d1d1b;
padding: 10px;
}
You need to set the text-align on the parent element like so:
.nav ul {
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
}
See Demo
I just edited your css to acheive what you need
.nav ul {
list-style-type: none;
text-align:center;
}
.nav li {
display:inline-block;
text-align: center;
padding: 10px;
}
.nav a {
text-decoration: none;
display: block;
color: #1d1d1b;
}
DEMO
Always avoid using body text-align try using instead for wrapper.
Make sure you have mentioned <!DOCTYPE html> on the top of your HTML code.
Otherwise your code seems perfect.
OK so here is my code, I don't understand why the first blank space is appearing to the left hand side of the page.
CSS
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
}
.header-left li{
list-style:none;
float:left;
}
.header-left a {
color:#000;
display:block;
height: 50px;
text-align:center;
vertical-align:middle;
text-decoration:none;
min-width: 100px;
overflow: auto;
border-radius: 20px;
}
.header-left a:hover {
color:#000000;
text-decoration:none;
}
#nav1 a:hover { background-color: #FF5B0D; }
#nav2 a:hover { background-color:#00FF40;}
#nav3 a:hover { background-color:#FF0080;}
#nav4 a:hover { background-color:#00CCFF;}
#nav5 a:hover { background-color: #FFFF00; }
HTML
<div class="header-left">
<ol>
<li id="nav1">a</li>
<li id="nav2">b</li>
<li id="nav3">c</li>
<li id="nav4">d</li>
<li id="nav5">e</li>
</ol>
</div>
You need to reset the natural padding and margin of the body and ol. Set:
body{
margin: 0;
padding: 0;
}
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
margin: 0; //RESET DEFAULT
padding: 0; // RESET DEFAULT
}
Add padding-left:0; to your .header-left ol rules.
.header-left ol {
width: auto;
float: left;
display: block;
background-color: #6899D3;
padding-left:0;
}
jsFiddle example
The reason to that is because u are using <ol><li></li></ol> which by default has a left padding. Even if you set list-type:none, you are not getting rid of the left padding. Instead, in the ol code block set padding:0; or padding-left:0 like this:
.header-left ol{
width: auto;
float: left;
display: block;
background-color: #6899D3;
padding-left:0;
}
This should solve your problem.
In your margin try putting in something like this as this will drag it up and pull the bottom up
This is to be put in your styles CSS sheet
margin: -30px 0px -30px 0px;