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;
}
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;
}
See Below for the Self-contained Example
Pictures of what I am trying to do, and what I actually get:
I want to create css rules so that my content looks like this (correct):
I am struggling to find a simple solution online, so my content looks like this (wrong):
Summary of what I'm trying to achieve:
I couldn't find a solution on stackoverflow or any css blog which provided solutions to similar but incompatible problems.
I have two floated divs, left and right on a row div. The left div contains an image that stretches out until it is the width of the left div. The left div's height is dependent on the img it contains. This is the height that I want the right div to conform to. I need this conformity so that when there is no more room on the right div, the overflow:hidden code will hide the excess text.
Fixed heights are not allowed. I am trying to avoid Java Script for this. Is there a solution in pure CSS?
CSS snippet
.left {
float:left;
width:50%
}
.right {
float:right;
width:50%;
background-color:darkgrey;
overflow:hidden;
}
img {
min-width:100%;
height: auto;
width: 100%;
}
As you can see, I don't have any code here to handle equal div heights because all the solutions I've tried have not worked.
Here is my jsfiddle so you can see the problem:
http://jsfiddle.net/1upodwg9/
To use overflow: hidden; the container would need a defined height, otherwise it doesn't know where the overflow begin. Since you want to have a dynamic image (with different heights) I'm afraid you have to use javascript.
Fiddle
http://jsfiddle.net/1upodwg9/14/
.child-row {
display:block;//added
background:red;
}
.left {
float:left;
width:50%;
height:100%;//added
display:inline-block;//added
}
.right {
width:50%;
background-color:darkgrey;
display: inline-block;//added
}
Fiddle example when you have more content
http://jsfiddle.net/1upodwg9/15/
Something like this fiddle ?
$(window).resize(function () {
var height = $("#leftDiv").css("height")
$("#rightDiv").css("height", height);
});
If you're only catering to IE8+ and/or modern browsers you can use display: table, display: table-row, display: table-cell
.parent {
margin: auto; /* helps place in middle */
width: 70%;
display: table;
}
.child-row {
display: table-row;
}
.child-col {
display: table-cell;
vertical-align: top;
}
Example: http://jsfiddle.net/1upodwg9/16/
(Sorry, I changed the image cos for some reason it wasnt loading on my end)
EDIT: Actually, it doesn't work for when the image is too small (the right col will set the height)
Demo
Hi, I have three div here. I want to give equal spacing on it's left and right side. I want to make it generic.
PROBLEMS I FACE
1.If i add more `div` element, it requires many CSS changes
2. What if content length increases? It ll decrease it's spacing.
3. I want to make it possible without using width and inline-block.
If any solutions possible, please let me know. If we 'MUST' use width or inline-block, suggest that also. Thanks in advance. My css as follows:
.wrapper
{
width: 100%;
height: 60px;
background-color: #454545;
}
.div1,.div2,.div3
{
float: left;
margin: 0 15% 0 10%;
color: #fff;
}
The method you are using, will not work if you change your content or change number of columns. Following are possible solutions as far as I know:
Option1:
.div {
width:33.33%;
display:inline-block;
}
Disadvantages:
1) inline-block leaves white space between elements. Comment out spaces between elements i.e.
2) As, column is given width, as the columns change, width needs to be changed.
Demo here.
Option2:
.wrapper {
display:table;
table-layout:fixed;
width:100%;
}
.div {
display:table-cell;
}
Disadvantages:
1) Doesn't work in IE7.
Demo here.
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;
}
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