Why doesn't this CSS center the container div?
The JSFiddle is here (ignore the random JQuery):
http://jsfiddle.net/evamvid/7SW3L/20/
Here's the "preview":
jsfiddle.net/evamvid/7SW3L/20/embedded/result/
Because it doesn't have a defined width (and is 100% wide by default so it is centered).
You can either explicitly set the width to be the width of the blocks combined, or you can set the .container to inline-block and have it's container use text-align: center.
body {
text-align: center;
}
.container{
display: inline-block;
}
Demo
Note: I've put text-align: center on the body for demo purposes. In reality, I'd suggest adding another container <div> so you don't have your entire body text-aligned to the center.
Just give width to the div. Calculate the total width it will take for the inner boxes and set the with to the div.
If you dont want to give it a width then search for the Table layout options for div.
.container{
margin: 0 auto;
width: 759px;
}
Just check this jsFiddle
http://jsfiddle.net/shinde87sagar/7SW3L/26/
It is not happening because you have not given width to .container. By default, div takes 100% width. You need to either give width to .container or give it text-align:center as inside .container your divs are inline.
DEMO using width here.
DEMO using center here.
since you are using display: block, you can use text-align:center; to center the elements
UPDATED FIDDLE
Add following.
.container{
text-align: center;
}
YOUR EXAMPLE REVISED HERE * Read my comments
DEMO
You had some issues:
.container{
width:758px; /* Set a width */
/* display:block */ /* DIVs ARE ALREADY BLOCK LEVEL ELEMENTS */
margin: 0 auto;
}
Or simply use
.container{
text-align:center;
}
DEMO
Related
No matter what I try, I cannot manage to find the proper CSS for the behaviour below:
A: Larger-than-window images show the upper left of the image and allow scrolling to see the rest of it.
(Important: the parent's DIV background is covered, but should be visible on images with transparency — even if you scroll.)
B: Smaller-than-window images are horizontally and vertically centered, the parent DIV covers the whole window.
Thanks for any help!
In order to center the smaller image inside the parent div, you can use display:flex for the parent div. Then set the justify-content and align-items to center. Here is a workaround,
#mydiv {
overflow: auto;
max-width: 500px;
max-height:500px;
}
.mainContainer{
width:500px;
height:500px;
background-color:#000;
display: flex;
justify-content: center;
align-items: center;
background-size:cover;
}
Replace the small image with this to check how it works with a large image.
<div class="mainContainer">
<div id='mydiv'>
<img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' />
</div>
</div>
PS: Change the width and height of the parent div to the required screen size of yours. Hope this will help!
The line-height property turned out to be the base for solving the problem. Not sure if this is a hack, but it works.
.mainContainer {
text-align: center;
}
#mydiv {
line-height: 100vH;
margin: 0;
}
img {
vertical-align: middle;
}
I'm trying to find a solution for this case:
I have a div container with a static width and overflow-x: auto; 2 child divs, one of them has fixed width, the other one doesn't.
How can I make div without width to have same width as parent?
Here's an example:
http://jsfiddle.net/no1lov3sme/U7PhY/1827/
A div can be of the same width of his parent just by using width:100%;
So you can solve your issue just writing this code on your CSS:
#child1{
width:100%;
}
That's the Demo Updated
Hope it helps :)
You can use
max-width: 100%;
and the width will always stay below or equal to 100% regardless of the content you generate.
If you want to both the child div of same width as parent div.
you can try this in two ways
#child1{
width:inherit;
background:green;
padding:20px;
box-sizing:border-box;
}
And you can also use:
width:100%;
box-sizing property is not compulsory but it helps in managing margin and padding.
I've found solution, if you wrap child divs into another div and setting display: table; and width: 100%; to that div, it solves my problem.
Demo: http://jsfiddle.net/no1lov3sme/pe2mks4j/2/
Just Use 'display: block;' instead of width, You can use following CSS for this:
#child2 {
display: block;
background: red;
padding: 20px;
}
updated fiddle
I found the solution in 2022 🙂
#parent {
display: grid;
}
I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.
Here's an example: http://jsfiddle.net/x8dhnh4L/
The pink div must expand to the full height of the parent (red border).
One solution I tried is using display:flex, but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.
You could try using a table layout:
set display:table on the parent
set display:table-cell to the childs that need the same height
#container {
position: relative;
width:600px;
border: 1px solid red;
display:table;
}
#content {
display: table-cell;
background-color:pink;
width:400px;
}
#side-bar {
display:table-cell;
background-color:yellow;
width:170px;
padding-left:25px;
vertical-align: top;
}
here's a working fiddle:
http://jsfiddle.net/x8dhnh4L/2/
As noted in the comments, margins do not work in elements with display:table-cell. If acceptable, you can use padding-left instead of margin-left...
You could also add an additional <div> to separate the 2 columns by 25px.
http://jsfiddle.net/x8dhnh4L/1/
Set side bar to
float:right;
and set content
height:100%;
A quick solution is to use display:table for #container and height:100% for #content.
http://jsfiddle.net/afelixj/x8dhnh4L/5/
If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"
#container {
position: relative;
width:600px;
border: 1px solid red;
height: 800px; //whatever height you need
}
#content {
display: inline-block;
background-color:pink;
width:400px;
height:100%;
float: left;
}
This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.
With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.
An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.
I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks.
Hope this helps!
I know when we set margin left and right to auto value for an html block element that has a specified width, then the element has center position.
But if I want to wrapper to have auto size depend on content, I set display : inline-block, but now center position is not working.
What should I do?
If you're setting display: inline-block to an element you can have a wrapper to that element with:
.wrapper {
text-align: center;
}
Demo: http://jsfiddle.net/sGaTZ/
If you don't want to use a wrapper, you can try this:
<div class="box">test</div>
and the CSS:
.box {
display: table;
border: 1px solid blue;
margin: 0 auto;
}
Using display: table with no specific width will cause the box to shrink-to-fit the content. You can then center it using margin: 0 auto.
Demo fiddle: http://jsfiddle.net/audetwebdesign/FdnGs/
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;
}