I have a "container" div to which I gave margin:auto;.
It worked fine as long as I gave it a specific width, but now I changed it to inline-block and margin:auto; stopped working
Old code (works)
#container {
border: 1px solid black;
height: 200px;
width: 200px;
}
.MtopBig {
margin-top: 75px;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div class="center MtopBig" id="container"></div>
New code (doesn't work)
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center MtopBig" id="container"></div>
DEMO fiddle.
It is no longer centered because it now flows on the page in the same way inline elements do (very similarly to img elements). You will have to text-align: center the containing element to center the inline-block div.
#container {
border: 1px solid black;
display: inline-block;
padding: 50px;
}
.MtopBig {
margin: 75px auto;
position: relative;
}
.center {
text-align: center;
}
<div class="center">
<div class="MtopBig" id="container"></div>
</div>
What 'auto' means:
Using auto for the horizontal margin will instruct the element to fill up the available space (source: http://www.hongkiat.com/blog/css-margin-auto/).
Why 'display: inline-block' does not center:
There is no available horizontal space in an inline setting. Before and after it are other inline elements (characters) that take up their own space. Therefore, the element will act as if the horizontal margin is set to zero.
Why 'display: block' centers:
When used as an element with display: block set to it, the available horizontal space will be the full width of the parent element minus the width of the element itself. This makes sense because display: block is reserving this horizontal space (thus making it 'available'). Note that elements with display: block cannot be placed next to each other. The only exception occurs when you use float, but in that case you also get the (expected) zero-margin-behaviour, as this disables the horizontal 'availability'.
Solution for 'inline-block' elements:
Elements with display: inline-block should be approached as characters. Centering characters/text can be done by adding text-align: center to their parent (but you probably knew that already...).
For elements with property display: inline-block;
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. [reference: CSS2§10.3.9]
margin-left:50%;
transform: translateX(-50%);
.container{
border:solid 1px red;
}
.container img{
display:inline-block;
margin-left:50%;
transform: translateX(-50%);
}
<div class="container">
<img src="https://placekitten.com/100/300" />
</div>
Related
So I've come up with a way to center children in a parent that is smaller than itself. I'm not to keen on the extra markup it takes to accomplish, and I am wondering if there is a better way to accomplish this, with better meaning less extra markup/styling, or "cleaner" in general.
THE GOAL
Given a parent that is smaller (less wide), put the center of the child element in the center of the parent element dynamically without knowing the width of the child element or the parent element.
MY APPROACH
So my approach uses three nested spans (the element itself is of little consequence).
The first span has a width of 0px and is centered via margin: 0 auto. This gives us the center of the parent container.
The second span has a width of auto, a white-space of nowrap, and a display of inline-block. The display is the key here. This restores the natural width of the child element
the third span has a position of relative, and a left of -50%. This centers the span in relation to the parent by offsetting half of the width of the child in relation to the center of the parent.
THE QUESTION
Is there a cleaner/less "janky" way of doing this?
THE MARKUP
<div class="box">
<span class="first-wrap">
<span class="second-wrap">
<span class="third-wrap">
This should be centered in relation to the box;
</span>
</span>
</span>
</div>
THE STYLES
.box {
border: 1px solid red;
width: 20px;
height: 20px;
margin: 40px auto;
}
.box .first-wrap {
display: block;
width: 0px;
margin: 0 auto;
border: 1px solid blue;
}
.box .first-wrap .second-wrap {
display: inline-block;
white-space: nowrap;
width: auto;
border: 1px solid green;
}
.box .first-wrap .second-wrap .third-wrap {
position: relative;
left: -50%;
border: 1px solid black;
}
THE FIDDLE
https://jsfiddle.net/d3w1wom0/
Just delete your css and replace with the following:
.box {
display: flex;
justify-content: center;
border: 1px solid black;
}
If you want to change the width, and center things accordingly you can just add the following to the above .box class:
width: 60%;
margin: 0 auto;
.box {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
}
will center your text in the box
I have the following:
#innerLabels,
#innerFields {
display: inline-block;
width: 200px;
height: 200px;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.innerLabel {
display: table;
border-style: solid;
border-width: 1px;
height: 100px;
width: 80%;
}
.innerLabel div {
display: table-cell;
vertical-align: middle;
border-style: solid;
border-width: 1px;
}
#outterFields {
background-color: red;
width: 60%;
min-width: 300px;
height: 300px;
}
#outterFields div {
display: inline-block;
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel">
<div>hello</div>
</div>
</div>
</div>
I can't work out why the inner most div isn't being centred? I did look at some of the answers here regarding centring however I can't see what the problem is...
I want the hello to be centred vertically to the centre but not horizontally. All other divs are positioned how I want them. There is no error in the other divs they are positioned side by side for a reason. The only change I want is the hello div moved vertically to the centre
You are just overiding your inner div with
#outterFields div {
display: inline-block;
}
Just remove it or if you where intending a direct child do:
#outterFields > div {
display: inline-block;
}
#innerLabels,
#innerFields {
display: inline-block;
width: 200px;
height: 200px;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.innerLabel {
display: table;
border-style: solid;
border-width: 1px;
height: 100px;
width: 80%;
}
.innerLabel div {
display: table-cell;
vertical-align: middle;
border-style: solid;
border-width: 1px;
}
#outterFields {
background-color: red;
width: 60%;
min-width: 300px;
height: 300px;
}
#outterFields div {
/* display: inline-block; */
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel">
<div>hello</div>
</div>
</div>
</div>
Your outterfields display inline block is overwriting other display items. I came up with better solution for you. I haven't used table but used flex here learn about flex it's more worth.
#outterFields {
background-color:red;
width:60%;
min-width:300px;
height:300px;
}
#innerLabels, #innerFields {
display:flex;
align-items:center;
width:200px;
height:200px;
border: 1px solid #000;
}
.innerLabel {
display:flex;
align-items:center;
border: 1px solid #000;
height:100px;
width:80%;
}
.innerLabel div {
display:table-cell;
vertical-align: middle;
border: 1px solid #000;
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel"><div>hello</div></div>
</div>
</div>
The necessary and most often sufficient condition where you can center a div using a display: table-cell, is as follows:
<div id="a">
<div id="b">
<div id="c">Helo</div>
</div>
</div>
CSS as follows:
body, html {
height: 100%;
}
#a {
display: table;
width: 100%;
height: 100%;
}
#b {
display: table-cell;
vertical-align: middle;
}
#c {
margin: auto;
text-align: center;
}
You need html and body elements to actually span the entire height of the document area if you want your a div to be able to make use of its 100% height. If your use case demands height that does not depend on the height of the document body, you don't have to use the body, html selector.
When you use display: table the otherwise auto-expanding width for a div element (width: auto implicit rule) does not apply the same way anymore as elements with display: table use a conservative width calculation -- they only by default take as much space as the content requires. Since I am illustrating a "100% 100%" centering to you, I have width: 100% there to have the element expand to available parent width.
height: 100% is likewise needed to have the element expand to available parent height. It does not matter if its display: block as with regular div elements, or display: table -- you need to specify height if you want computed height that goes beyond content height.
The display: table-cell rule only works if there is an ancestor element with display: table, hence you need at least two elements inside one another to apply display: table-cell to the one that is contained in the other. You don't need to specify height because elements with display: table-cell occupy available parent height automatically.
vertical-align rule for the display: table-cell elements is the only case where the alignment applies to the content inside the element, as opposed to its usual behavior where it applies with regard to how the element is positioned within the parent. Meaning that in our case, the vertical-align tells the browser that everything contained in the element with display: table-cell is to be centered vertically within its computed height.
For the c element you would need margin: auto only if you had content that did not completely fill available parent width. Since div elements normally do, it is not necessary, but is forward thinking on my part -- in case you decide to use span or something else that computes its width conservatively. The text-align speaks for itself -- The anonymous textual content and text inside descendant elements, will be centered in the middle along horizontal axis.
Following is the snippet (demo on JSFiddle)
#inner {
background-color: yellow;
margin-left: 50px;
margin-bottom: 50px;
}
#outer {
background-color: red;
}
<div id="outer">
<div id="inner">
test
</div>
</div>
As can be seen in the demo, the #inner element has a margin-bottom.
I expected the height of #outer will be large enough to include the outline of #inner margin. And the output will have a red bar below the yellow bar.
However, I found the #outer's height is not changed at all though I added the rule margin-bottom: 50px for #inner.
Does anyone have ideas about this? And is there a way to ensure the content area of parent is large enough to hold the outline of its child's margin?
Also, apart from giving a hack solution, it would be great if the answer can include some explanation or links to related document/article. And why is the margin rule designed like this.
Thanks!
What you are seeing is the collapsing margins problem.
Top and bottom margins of blocks are sometimes combined (collapsed)
into a single margin whose size is the largest of the margins combined
into it, a behavior known as margin collapsing.
Out of the three cases, yours is the case of collapsing margins between parent and child elements.
If there is no border, padding, inline content, height, min-height, or
max-height to separate the margin-bottom of a block with the
margin-bottom of its last child, then those margins collapse. The
collapsed margin ends up outside the parent.
If you add another element just after your parent div you will see that the margin ends up outside of it. The snippet below, shows you the collapsed margin:
#inner { background-color: yellow; margin-left: 50px; margin-bottom: 50px; }
#outer { background-color: red; }
<div id="outer">
<div id="inner">
test
</div>
</div>
<p>You can see the collapsed margin above this text outside of the parent div.</p>
Here is the reference from the specs: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
How to fix this?
The solution is given in the quoted ref text itself above. Just apply any one of these to your parent div - border, padding, height, min-height, or max-height.
Easiest way to fix this would be to add a border to your outer div:
#outer { background-color: red; border: 1px solid gray; }
Better still, apply padding to the parent div instead of the margin on inner one.
#outer { background-color: red; padding-bottom: 50px; }
Examples:
Fiddle (with border): http://jsfiddle.net/abhitalks/rrtfhyky/1/
Fiddle (with padding): http://jsfiddle.net/abhitalks/rrtfhyky/2/
Snippet (with padding):
#inner { background-color: yellow; margin-left: 50px; }
#outer { background-color: red; padding-bottom: 50px; }
<div id="outer">
<div id="inner">
test
</div>
</div>
<p>Some text that follows.</p>
I had the same problem, just add overflow: auto to #outher div and it will fix the parents height
#inner {
background-color: yellow;
margin-left: 50px;
margin-bottom: 50px;
}
#outer {
overflow: auto; /* ADDED */
background-color: red;
}
<div id="outer">
<div id="inner">
test
</div>
</div>
Add This CSS
#inner {
background-color: yellow;
margin-left: 50px;
margin-bottom: 50px;
display: inline-block;
}
give a border to outer div :
#inner {
background-color: yellow;
margin-left: 80px;
margin-bottom: 50px;
}
#outer {
background-color: red;
border:1px solid white;
}
<div id="outer">
<div id="inner">
test
</div>
</div>
I know this common "bug", what I would do if I were you is changing the margin into padding and put it to the outer div:
My solution:
#inner {
background-color: yellow;
}
#outer {
background-color: red;
padding-left: 50px;
padding-bottom: 50px;
}
Also there are 3 other possible fixes:
By #Jenti Dabhi is the add the display:inline-block to the #inner div:
#inner {
background-color: yellow;
margin-left: 50px;
margin-bottom: 50px;
display: inline-block;
}
By #Chris is to add overflow: auto to the #outer div:
#outer {
overflow: auto;
background-color: red;
}
By #Abhitalks is to add a border to your #outer div:
#outer {
background-color: red; border: 1px solid gray;
}
This is a Typography concept,
generally, vertical margins of adjacent elements collapse!
Have a look at this article
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle: http://jsfiddle.net/5EcPK/
The above code is trying to place the #left div and the #right div, side by side, in a single row. But as you can see in the above JSFiddle URL, this is not the case.
I am able to resolve the issue reducing the width of one of the divs to 49%. See http://jsfiddle.net/mUKSC/ . But this is not an ideal solution because a small gap appears between the two divs.
Another way I am able to solve the problem is by floating both the divs. See http://jsfiddle.net/VptQm/ . This works fine.
But my original question remains. Why when both the divs are kept as inline-block elements, they do not fit side by side?
Update: as it's 2021, use flexbox or even better - CSS grid layout instead of inline-block.
When using inline-block elements, there will always be an whitespace issue between those elements (that space is about ~ 4px wide).
So, your two divs, which both have 50% width, plus that whitespace(~ 4px) is more than 100% in width, and so it breaks. Example of your problem:
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
There is a few ways to fix that:
1. No space between those elements
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>
2. Using HTML comments
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>
3. Set the parents font-size to 0, and then adding some value to inline-block elements
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
4. Using a negative margin between them (not preferable)
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
5. Dropping closing angle
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>
6. Skipping certain HTML closing tags (thanks #thirtydot for the reference)
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<ul>
<li class="left">foo
<li class="right">bar
</ul>
References:
Fighting the Space Between Inline Block Elements on CSS Tricks
Remove Whitespace Between Inline-Block Elements by David Walsh
How to remove the space between inline-block elements?
As #MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
good answer in css3 is:
white-space: nowrap;
in parent node, and :
white-space: normal;
vertical-align: top;
in div (or other) at 50%
exemple : http://jsfiddle.net/YpTMh/19/
EDIT:
there is another way with :
font-size: 0;
for parent node and override it in child node
EDIT 2021 : personaly, I recommand use flexbox now : https://the-echoplex.net/flexyboxes/
It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:
<div id="left"></div><div id="right"></div>
Because there is a space between the elements. If you remove all whitespace, they will fit.
<div id="left">Left</div><div id="right">Right</div>
Either make them block instead of inline-block. This will render divs ignoring spaces between them.
display:block;
or remove space between tags
<div id='left'></div><div id='right'></div>
or add
margin: -1en;
to one of the divs in order to mitigate space taken by single space rendered.
Please check below code:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}
<div id="left">Left</div>
<div id="right">Right</div>
It can be done by adding the css display:inline to the div that holds the inline elements.
While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.
So it would be safer to use display:inline;
Flexbox example - this would be used for the parent class holding the two side by side elements.
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
Taken from Vertically centering a div inside another div
add float: left; to both div tags.
div {
float: left;
}
Given the following HTML:
<div id="container">
<div id="left">Left</div>
<div id="centre">Centred</div>
</div>
and CSS:
#left {
float: left;
text-align: left;
}
#centre {
text-align: center;
}
How can I horizontally centre the centre element without giving it a fixed width? The following image shows the desired result:
Here's what I can get it to look like so far:
Here's a jsFiddle demonstrating what I have done so far.
I prefer a general-purpose solution that doesn't require widths of anything to be specified.
If you know the width of the left div, you can do it like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
#left {
float: left;
width: 30px;
}
#centre {
margin: 0 40px;
text-align: center;
}
#left, #centre, #container {
border: 1px solid #000;
}
#container {
width: 175px;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">Left</div>
<div id="centre">Centred</div>
</div>
</body>
</html>
If you want the #centre element with a shrink-to-fit width for the content, you can use the following:
<div id="container">
<div id="left">Left</div>
<div id="centre">Centred</div>
</div>
and the following CSS:
#container {
width: 175px;
text-align: center;
position: relative;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
#left {
position: absolute;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
#centre {
display: inline-block;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
If you want to get the shrink-to-fit width for #centre, you need to either float the element, use absolute positioning or declare an inline-block display type. Since you don't want to specify a width for #centre, using float or absolute positioning will not allow you to center the content. However, if you specify display: inline-block and use text-align: center on the parent #container, you will get center the element and have some styling control for the border, padding and so on.
However, for this to work, you must use absolute positioning for the #left element. If you use float, the content of #centre will wrap around the left element and change the centering.
Set position: relative on the #container otherwise the #element will be positioned with respect to the root (or some other non-static positioned) element of the page.
Fiddle: http://jsfiddle.net/audetwebdesign/hTFBa/
Footnote
In your demo example, you have single word text labels for the content. If you had multi-word phrases, you would need to constrain the left element's width or specify some margins on the center element to prevent text overlap.