I'm in the process of learning css and js, and I was looking at this nice looking navigation bar
http://codepen.io/atelierbram/pen/gCqDy
however, when I set it up on a test website I cannot get the navigation bar to center. text-align doesn't do anything, setting margin:auto; seems to have no effect either. What's going on in this that I can't center the navigation bar by normal means?
In that example, #fancy-nav is actually floated to the right with a width of 50%. It appears to be centered, but it's not a traditional method for centering.
To use the margin:auto method, you'll need to give your HTML element some width, for example:
#nav-wrap {
width: 200px;
margin: 0 auto;
}
Of course, this simple example eliminates the dynamic sizing of the container, so it's really not all that useful if you're looking for a dynamic layout. There are plenty of resources available that talk about dynamically centering dynamic divs.
Change the #fancy-nav style to margin it for the middle position by using margin:0 auto and remove the float:right property
#fancy-nav {
margin:0 auto;
position: relative;
width: 50%;
}
Check it here
add this css
#fancy-nav{
display: table;
margin: 0 auto;
position: relative;
}
Related
This will probably turn out to be a trivial issue, but I'm trying to center all my divs inside a container, but no matter what I try with the auto margins, everything is still aligned to the left of the page.
Anyone know what's going on?
Stuck it on jsfiddle too:
http://jsfiddle.net/eLogy4nh/
#page-container {
margin: 0px auto;
}
Any help would be awesome chaps.
You #page-container block has 100% width by default, so the margin: 0 auto will not do anything.
However, your block level child elements can be centered, for example:
#main-nav {
background: grey;
height: 30px;
width: 90%;
margin: 0 auto;
}
You need to apply the margin: 0 auto to each container that you want centered within your #page-container parent block.
You can do this many ways with CSS, either apply the same rule to each block that needs to be centered or create a CSS class with the centering rule and then apply the class to each block, for example:
#page-container > div {
margin: 0 auto;
}
Note that a simpler way of getting a similar result would be to set the width of #page-container to 90% and let the child elements take on the full width of the parent block.
However, both techniques are valid and the one to pick may depend on other design and layout considerations, for example, the use of background images and so on.
See demo fiddle at: http://jsfiddle.net/audetwebdesign/resqhsoe/
Looks like this has already been answered above...
But to center an item it will need a width, without one a block element will contain 100% of the available space.
#page-container {
width: 70%;
margin: 0px auto;
}
How to horizontally center a div of 10000px (or others wider than full screen) in CSS?
e.g.
#widerdiv{
width:10000px;
height:100px;
border:#009933 1px solid;
}
it seems "margin: 0 auto" doesn't work in this situation
Try add similar to
position: absolute;
left: 50%;
margin-left: -5000px;
As ridiculous of a width as that is.. I have two solutions for you.
The margin won't work because it has nothing to align itself with so here are two possibilities.
First Solution: Use a div to wrap it. The JsFiddle and the code below:
<div id="wrapper">
<div id="widerdiv"></div>
</div>
CSS for first solution
#wrapper{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Second Solution: Define your body width. The JsFiddle and the code below(which is only CSS because I would not have modified your HTML) :
body{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Now, by all means necessary, you can make that width as big as you want (heaven forbid the horizontal scrolling...) but if you play with those JsFiddles, you are going to realize that you absolutely need to define a width of whatever this Div is inside of.
Last, the Almanac is going to be your friend on this one. And as a quick breakdown, incase you decide to try vertical positioning, this is what happens when you use 'margin: 0 auto;' in CSS:
"The element is given a specified width
The left and right margins are set to auto
Without the specified width, the auto values would
essentially have no effect, setting the left and right
margins to 0 or else to whatever is the available space
inside the parent element.
It should also be pointed out that auto is useful
only for horizontal centering, and so using auto for
top and bottom margins will not center an element horizontally,
which can be confusing for beginners."
The quote above is also referenced in the Almanac.
I want to center an object using CSS and no hacks, is this possible and how?
I have tried this, but than my p tag is gone.
.centered {
position: fixed;
top: 50%;
left: 50%;
}
There's several ways to center an element. But it depends on what your element is and how we choose to display it:
If you have {display:inline; }
This is simple. You can just use "text-align: center;" to center text, images and divs.
If you have {display:block;}
This is a bit more difficult. It depends on how your object is positioned. Your object could be relative, absolute, or fixed.
If it is relative; then you can use "margin:0 auto;", however you will require a width value.
If it is absolutely positioned, then you need to specify your "top:" and "left:" values. You'll also need a width. If you know the width of the element, the best way is to use {left:50%; margin-left:-X}, where X = 1/2 the width of the element.
HTML:
<div>Centered</div>
CSS:
div {
margin: 0 auto;
width: 200px;
}
Live example: http://jsfiddle.net/v3WL5/
Note that margin: 0 auto; will only have an effect if the div has a width.
Use margin: auto like this:
margin: 0px auto
Use this for general purposes. Even span or div which is inside whatever :
width:inherit; display:block;margin:0 auto;
Usage :
In-Line usage : Content goes
here....
CSS Code :
#text-align
{
text-align:center
}
HTML Code :
<div id="text-align">Content goes here....</div>
http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx
late into the game, but have you tried with display:flex on the parent ?
I have a useful class that is simple and works with all type of elements:
/* apply this on the parent */
.center {
display:flex;
align-items: center; /*vertical alignement*/
justify-content: center; /* horizontal alignement*/
}
This is relatively new but supported at ~98% of major browsers.
However I suggest that you learn a bit about flexBox, it may seem complicated at first but it is very powerful for all type layouts !
if you don't need to be position:fixed; you can just use
<center>
Hello
</center>
This is deprecated in HTML5
I am trying to create a lead generation page. I want to center all the contents on the page to the center when displayed on any browser size.
i tried using vertical align center. But it seems not to work.
Which are the best practices to do so ?
http://play.mink7.com/h/mspre/
If you just mean centering between left and right edges, you create an element with a fixed width, and declare margin: auto; on it.
If you want to center the element both horizontally and vertically, you position it halfway across the page both horizontally and vertically, then pull it back by half of the element's width and height.
For example:
.someElement {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
For me the best way to do it is to make a container div of set width. I normally choose about 900px as pretty much all displays are wider than this now a days. I then centre div by using margin auto.
#container { width: 900px;
margin: 0px auto 0px auto;
}
This will centre the div. Bob's your uncle.
If you want I can post examples of this.
Mike
Here you go:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
I'm currently trying to center an horizontally, as in the object (box if you will) itself, not the text inside. I've tried many suggestions and followed many tutorials, yet nothing works... I finally ended up setting the margins myself, but I'd like it to adjust itself dynamically. This is the code I currently have:
.navbar {
margin:auto;
margin-left:30em;
display:none;
position:fixed;
top:0px;
list-style-type:none;
padding:0;
overflow:hidden;
z-index:200;
}
.navbar li {
float: left;
display:inline;
width:120px;
text-align:center;
}
.navbar #left {
left:0px;
width:100px;
height:35px;
background:url('res/navigation.png') 0 0;
}
... and so on. The html is really simple, just the list with the corresponding class and id attributes.
The proposed by many solution to set margin: 0 auto; doesn't work because you've got position: fixed; on your ul ;)
To my mind a good way of centering positioned elements is this:
.someelement{
width: 600px;
position: fixed;
left: 50%;
margin-left: -300px; //here we put half of the element's width
}
A live example of this method can be seen here: http://jsfiddle.net/skip405/G8LrV/
The only problem with this method is that we set the fixed width.
If you have an element whose width may change - you'll probably have to calculate it dynamically by jQuery, for instance, and then set the negative margin.
A live example of it can be seen here: http://jsfiddle.net/skip405/G8LrV/1/
Centering with CSS requires using margin: 0 auto -- as others have mentioned, and as I think you've already tried.
The reason this may not have worked for you is that it also requires the object to have a defined width and to have a block type display property (ie either display:block or display:inline-block).
It needs to be a block because only blocks can be manipulated in this way.
And it needs to have width because blocks default to 100% of the width of their container, which obviously leaves no room for it to be centered. The width can be a percentage rather than px if you want it to adapt to the size of the container, but it must be set.
If you're still struggling with it, try using Firebug (or similar) and examine what the browser thinks it's doing with the box. You may spot the problem here.
And if that doesn't help, create a JSFiddle example; this will help you see what's going on, and also give you something to show here.
It's a bit tricky, and you'll have to put the <ul> into a container. Then use the following css:
div {
text-align: center;
}
ul {
text-align: left;
display: inline-block;
width: auto;
}
Where div is the container around ul.
See this fiddle for live demo
You need to set an explicit width in order for the margin:0 auto to work.
Alternatively you can use some position trickery, as seen here, for when the width is an unknown.
And you'll need to remove display:none from .navbar or you won't see anything; unless there's some other code at work that isn't included.
to center a div relative to its container you need to do
width:75%;
margin-left:auto;
margin-right:auto;
that way the object centers itself.
You can try putting the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code{display: flex; justify-content: center; width: 300px;
Put the .navbar in a container using section or div then set the display property of the container to flex then justify-content property to center and giving the navbar a specific width. Something like this:
section or code {
display: flex;
justify-content: center;
width: 300px;
}