I had previously thought that both of the code blocks below would correctly center a div (with some issues with older browsers of course). The first method uses text-align: center whereas the second method uses left and right margins of auto. However, the first block of code below does not center the inner div as I was expecting. Any ideas why?
<div style="text-align: center; background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue">Not working</div>
</div>
The following code does center the div:
<div style="background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto">Works</div>
</div>
Here is my JSFiddle
It's a block-level element, its position won't be effected by the text-align property. If you set it to display-inline, it will work.
<div style="text-align: center; background-color: red;">
<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; display: inline-block;">It will work now</div>
</div>
The div that is centered has margin-left: auto and margin-right: auto, the div that doesn't work lacks any margins.
See this DEMO
On the top box, I added: margin: 0 auto which is shorthand for: margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;
Related
It creates exactly what I need but I cannot center to whole element on the page. centering will only center the text within the background colored area. What am I doing wrong?
I tried many different code combination but cannot make this work.
GROW YOUR BUSINESS WITH US
<h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px;">GROW YOUR BUSINESS WITH US</h1>
I would like whole element above to be centered on the page.
You also could just change the display attr to block and add margin:auto to it!
I placed it into a div with 1000px width for you to view, but you just need the h1
<div style="width:1000px;">
<h1 style="display: block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin:auto;">GROW YOUR BUSINESS WITH US</h1>
</div>
You can add div around H1 and add width and margin:auto like
<div style="width:650px; margin: auto;"><h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; ">GROW YOUR BUSINESS WITH US</h1><div>
Or like Huangism do
<h1 style="text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin: auto;">GROW YOUR BUSINESS WITH US</h1>
here is an example
.container{
width: 100%;
height: 100%;
border: 1px red solid;
display: inline-block;
height: 90vw;
}
.container > div{
width: 150px; /* very impotent */
margin:auto;/* center position */
border:1px #CCC solid;
text-align:center;
}
<div class="container">
<div> center div </div>
</div>
I'd like to create an outer DIV, which contains several inner DIVs. At the moment, this works perfect.
But I have some troubles with the margin of the outer div. If the outer DIV has a fixed height (f.ex. height: 100px;), there will be a margin at the bottom. But if I set the height to auto (it should have only the height of all inner DIVs), the margin-bottom disappears.
Example:
Here, the margin-bottom applies normaly. The height of the outer-box is set to a fixed height:
https://jsfiddle.net/v81mehc5/3/
But changing the height of the outer DIV from a fixed height (75px) to auto, the margin-bottom of 40px disappears.
https://jsfiddle.net/v81mehc5/2/
What's missing in the second case? What's wrong overthere?
HTML
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
CSS
.outer-box
{
width: 200px;
height: 75px; /*if height: auto > no margin-bottom will be applied*/
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
Thank you very much for your help.
Nothing is missing but you are using floating elements inside the outer div. So height:auto means height:0 in you case so you are only seeing the margin-bottom (that you thought it's the height).
In order to fix this you need to add overflow:hidden to outer div.
.outer-box
{
width: 200px;
height: auto;
overflow:auto;
background-color: #f1f1f1;
border: thin dotted #ccc;
margin-bottom: 40px;
}
.innerbox-left
{
width: 100px;
background-color: blue;
float: left;
}
.innerbox-right
{
width: 100px;
background-color: blue;
float: right;
}
text before
<div class="outer-box">
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
<div class="innerbox-left">left</div>
<div class="innerbox-right">right</div>
</div>
text after
More questions related to the same issue for more details :
Why does overflow hidden stop floating elements escaping their container?
CSS overflow:hidden with floats
Floating elements collapse their container. You'll see that if you apply a border to it:
<div style="border: 1px solid #666; margin-bottom: 40px;">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
You can use a clearing technique to get around this as a possible solution that works in IE8 and up:
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div style="border: 1px solid #666; margin-bottom: 40px;" class="clearfix">
<div style="float: left; height: 100px; border: 1px solid #999; width: 49%;"></div>
<div style="float: right; height: 100px; border: 1px solid #999; width: 49%;"></div>
</div>
Text
This is the code that I have in my page
<fieldset style="width: 60%; border: 1px solid #BBB; margin-left: auto; margin-right: auto; border-radius: 10px; text-align: center;">
<div style="width: 95%; margin: 5px; padding: 6px; margin-left: auto; margin-right: auto; overflow-x: scroll; text-align: center;">
<canvas id="graph" width="1645" height="300"></canvas>
</div>
</fieldset>
As you can see I have a canvas inside a div, which has set the overflow-x: scroll property.
This is the result that I have which is what I am not looking for. As you can see the fieldset (which is width: 60%;) covers the entire screen width and over. The div is scrolling only a little part of the canvas.
This should be the result that I'd like to see:
Here I set the canvas width to 750 just to show what I want to have.
In conclusion, I want to have the fieldset with a width: 60% and a div that scrolls the overflow-x of the canvas. How could I do it?
This is a known issue with the width/min-width of the fieldset element. See this question and it's answer for fixes.
In Webkit you can fix it by simply adding min-width: 0; to your fieldset.
Here a snippet:
fieldset {
width: 60%;
border: 1px solid #BBB;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
text-align: center;
min-width: 0;
}
fieldset div {
width: 95%;
margin: 5px;
padding: 6px;
margin-left: auto;
margin-right: auto;
overflow-x: scroll;
text-align: center;
}
<div>
<fieldset>
<div>
<canvas id="graph" width="1645" height="300"></canvas>
</div>
</fieldset>
</div>
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
How can the parent div auto resize it's height based on the child's height?
div#main{
width: 970px;
height: 100px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
div#left{width: 383px;
height: 100%;
margin-right: 5px;
background: rgb(0,0,255);
float:left
}
div#description{width: 100%;
height: 50%;
background: rgb(0,0,0)
}
div#following{width: 100%;
height: 50%;
background: rgb(0,255,0)
}
div#posts{width: 577px;
height: auto;
margin-left: 5px;
background: rgb(255,255,0);
float: right
}
<div id="main">
<div id="left" class="cell">
<div id="description" class="cell">
</div>
<div id="following" class="cell">
</div>
</div>
<div id="posts" class="cell">
there are some contents here (height is set to auto)
</div>
</div>
I made a very simple example for you to see how variable parent height works.
.parent
{
height: auto;
border: 1px dashed #f00;
padding: 5px;
}
.child
{
height: 100px;
border: 1px dashed #0f0;
}
<div class="parent">
<div class="child">
</div>
</div>
Follow what is there and you'll do fine.
After looking through your code it's a float problem, you have to add a new div to the bottom with clear: both; to clear the floats and make the #main div appear filled in.
Look at example here.
div#main{
width: 970px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
Remove height attribute
CSS3
.container {
display: inline;
position: relative;
}
Should fix it. Use inline-block if you want it to be a block with inline.