I know this has been discussed in length, but I cannot seem to find an answer to solve this problem. This is a simple example to illustrate my issue. I have two children div elements inside a parent div and I want them to be horizontally centered inside the parent div. Here is the fiddle:
JSFiddle
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em auto;
}
<div id="container">
<div class="tile">
<!--
When you remove this comment, the div shifts down and I do not understand what is causing that.
<h3>This Title Moves the div down. Why?</h3>-->
</div>
<div class="tile"></div>
</div>
Now is there a simple solution that I am missing? Also, I have a secondary question about the h3 tag as well. When the comment around the h3 tag is removed, the first div shifts down. What about the h3 tag is causing the div to shift down and how do I prevent it from happening?
Thanks for your answers and your help, and I apologize for a potential repeat question.
Add below code to #container:
display: flex;
justify-content: center;
align-items: center;
Live Snippet
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em 0;
}
<div id="container">
<div class="tile">
<!--
When you remove this comment, the div shifts down and I do not understand what is causing that.
<h3>This Title Moves the div down. Why?</h3>-->
</div>
<div class="tile"></div>
</div>
You can add: .title { display: block; }
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
}
.tile {
border: 1px solid black;
display: block;
height: 40em;
margin: 1.5em auto;
width: 20em;
text-align:justify;
padding:7px;
}
h3 {
margin: 0;
padding: 0;
}
<div id="container">
<div class="tile">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</div>
<div class="tile">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
</div>
you can add margin:auto to .tile and text-align:center to #container
#container {
position: relative;
float: none;
margin: 0 auto;
border: solid blue 1px;
width: 100%;
text-align: center;
}
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: auto;
}
<div id="container">
<div class="tile">
<h3>This Title Moves the div down. Why?</h3>
</div>
<div class="tile"></div>
</div>
When you use display:inline-block by default was vertical-align: bottom; so that set css for .tile to vertical-align: middle; and text-align:center to #container
.tile {
width: 20em;
height: 40em;
border:solid black 1px;
display: inline-block;
margin: 1.5em auto;
vertical-align: middle;
}
Working Code: https://jsfiddle.net/e8on1cko/5/
` `
#container {
padding:25%;
text-align:center;
background:#e7e7e7;
}
.tile{
background:white;
display:inline-block;
padding:20%;
}
<div id="container">
<div class="tile">
<h3>This Title Moves the div down. Why?</h3>
</div>
<div class="tile"></div>
</div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Why is there a margin between divs? I tried to remove it by different methods but nothing worked. I had to reduce their width to stack them in rows.
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
display: inline-block;
margin: 0px;
background-color: #f1f1f1;
width: 248px;
height: 250px;
border: 0 !important;
font-size: 0;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Make the width of .box 250px and add an attribute of 'float: left' to .box
.box{
display: inline-block;
margin: 0px;
padding: 0;
background-color: #ff9900;
width: 250px;
height: 250px;
float: left;
}
Fiddle
Due to your display: inline-blocks, the white spaces appear in between your block elements.
There are many resolutions to the same, refer to David Walsh's blog
What I would prefer to do here is use float instead of display: inline-block.
Refer code:
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
float: left;
margin: 0px;
background-color: #f1f1f1;
width: 248px;
height: 250px;
}
<div class="wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
The problem is that there are spaces between the div's. Two possible solutions:
1:
<div class="wrapper">
<div class="box">
</div><div class="box">
</div><div class="box">
</div><div class="box">
</div>
</div>
-
.box { display: block; } // not multiple elements in one line, if you want this
2:
.wrapper { font-size: 0px; }
.box { display: block; } // not multiple elements in one line, if you want this
Its not margin what is causing space between two div its because of display:inline-block which you have added to box class, just add float: left; to same and it will go away.
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 5% auto;
padding: 0;
}
.box{
display: inline-block;
margin: 0px !important;
background-color: #f1f1f1;
width: 248px;
height: 250px;
border: 0 !important;
float: left;
}
<div class="wrapper">
<div class="box" style="background: rebeccapurple;">
</div>
<div class="box" style="background: orange;">
</div>
<div class="box" style="background: orange;">
</div>
<div class="box" style="background: rebeccapurple;">
</div>
</div>
Try setting border: 0 !important on all divs affected, once I had a similar problem and found that the divs were inheriting a 1px border that was breaking the width.
You are displaying them as inline blocks, so the white space between them in the formatting of your code is still being displayed just as it would had they been any other inline element.
You need to reformat your code, or set the wrapper to have a zero font size so they do not get rendered.
Try using
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: auto;
padding: 0;
display: block;
background: green;
}
.box{
display: block;
margin: 0px;
width: 248px;
height: 250px;
background: red;
padding: 0;
float: left;
}
Display: inline-block creating that margin.
Or may be you could try
.wrapper{font-size: 0;}
.box{ display:inline-block;}
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.
Really can't figure out what's wrong with it, but all the content I add into div, goes out of it, just like it's not in it.
Check it here: JSFiddle!
HTML___
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
</div>
</div>
</div>
CSS___
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
}
#logo {
float: left;
}
You need to clear your floats:
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT NOW APPEARS INSIDE DIV :)
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
Because you've floated your logo, any content following it will wrap around it. Which is what is causing the effect you're seeing.
Add overflow:auto to your #header div to restore the expected behavior:
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
overflow:auto;
}
jsFiddle example
Floating the child essentially removes it from the flow and the parent collapses. Adding the overflow rule gives you the behavior you expected.
I'd urge you to use flex. It's quite robust and lets you create any kind of layout you want without any issues really. I've added a menu to the right hand side just to illustrate your logo in actual context.
<!-- HTML -->
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
<div id="content-menu">
<div id="menu">
Home
Contact
About
About
</div>
</div>
</div>
</div>
</div>
Corresponding CSS:
/* CSS */
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
margin: 1.2em auto;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
display: flex;
}
#logo { flex: 1; }
#content-menu { flex: 4;}
#menu { display: flex; }
#menu > a {
display: inline-block;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #000;
flex: 1;
}
I have a problem on my responsive homepage. When the page is less than 1024px wide, I want the two contents widgets below each other and horizontally aligned. I defined their width and tried to center them with margin: 0 auto, but they stay at the left.
This is the link: http://readyforsolutions.be/wordpress/
This is my HTML:
<div class="home-left">
<h1 class="widgettitle">Title</h1>
<p>Text</p>
<div class="homebuttonbox"><a class="homebutton" href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick Scan</a></div>
</div>
<div class="home-right">
<h1 class="widgettitle">Title</h1>
<p>Text</p>
<div class="homebuttonbox"><a class="homebutton" href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick Scan</a></div>
</div>
This is my CSS:
.entry-content {
width: 100%;
}
.home-left {
width: 100%;
float: none;
display: block;
margin: 0 auto;
}
.home-right {
width: 100%;
float: none;
display: block;
margin: 0 auto;
padding-top: 120px;
}
Any help is appreciated!
Thanks,
Stefaan
Modifying the display and margin parameters of the container DIV tag may do the trick:
HTML:
<DIV class="entry-content">
<div class="home-left">
<h1 class="widgettitle">Title #1</h1>
<p>Text</p>
<div class="homebuttonbox">Content Box #1</div>
</div>
<div class="home-right">
<h1 class="widgettitle">Title #2</h1>
<p>Text</p>
<div class="homebuttonbox">Content Box #2</div>
</div>
</DIV>
CSS:
.entry-content {
margin-left: auto;
margin-right: auto;
border: 5px black solid;
text-align: center; }
.home-left {
float: none;
margin: 0 auto;
border: 1px red solid;
display: inline-block;
text-align: left;
}
.home-right {
float: none;
margin-left: 0px;
border: 1px blue solid;
display: inline-block;
text-align: left;
}
Other Resource:
CSS Centering
Example:
CodePen Example
For some reason, I can't seem to center this list element in the page. It contains three equally-sized boxes, and I'd like them to always stick to the center.
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
float: right;
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
}
.clear {
clear: both;
}
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
For margin: auto to work, your elements need to have a width given to them somehow (usually through width). The usual solution to make things scale automatically is display: inline-block; (though flexbox makes this much easier when supported):
.box-container {
display: inline-block;
text-align: left;
}
Then you’d give its parent text-align: center;. Alternatively, width: 300px; (with perhaps a minor adjustment or removal of spaces) seems like it could work well here; it depends on your actual layout.
body doesn’t need width: 100%;, by the way.
For everything you want to center horizontally, you should set its margin-left and margin-right to 'auto'.
Give your box container a width:
CSS
.box-container {
display: block;
margin: 0px auto;
width: 360px;
border: 1px solid blue;
}
Example here: http://jsfiddle.net/82WCU/
Remove the float: right from each the all class. That is causing the boxes to move to the right. Make the box-container center aligned (this will bring them to the center), and change the display of each box to inline-block.
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
text-align: center;
}
.all {
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
display: inline-block;
}
Try:
.box-container {
text-align:center;
}
.all {
display:inline-block;
}
NOTE:
inline-block leaves white-space between elements. To remove this space, write elements on same line rather than writing them on separate lines.
Change:
to
<div class="box-container">
<div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>
DEMO here.
Try This it work perfectly:
HTML
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
css
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
background: none repeat scroll 0 0 red;
float: right;
height: 100px;
margin-right: 13%;
width: 100px;
}
.clear {
clear: both;
}