I am creating a site in bootstrap, and I want to know how to vertically center two child divs inside of a parent div. I know this is probably pretty simple, but I have tried everything and it will not work.
(http://codepen.io/cjhill02/pen/VLPERd)
try margin:auto
* {
border: 1px solid #ddd;
}
section {
padding: 100px 0;
margin: auto
}
.col-md-6{
margin: auto
}
for IE9 and IE10 put display:table to parent div and set attribute vallign="middle";display:table-cell to child element
vallign is a basic property supperted by old browsers as well as some new browsers
You can always do it with display: flex;
JS Fiddle
.container {
display:flex;
width:100%;
align-items: center;
justify-content: center;
height: 400px;
border: 4px solid black;
}
.container div {
display:flex;
align-items: center;
justify-content: center;
}
.container > div {
width: 40%;
background-color: red;
height: 221.5433px;
}
.container > div + div {
width: 40%;
background-color: brown;
height: 278.8431px;
}
<div class="container">
<div>centered</div>
<div>centered</div>
</div>
Do we know the height of the parent div? if so you can do like here
.row {
justify-content: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Please see here for result.
Related
I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"
Thanks in advance.
.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;
}
.options {
float: left;
width: 151px;
height: 100px;
background-color: green;
}
.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;
}
.plan:last-child {
float: right;
}
.plan-featured{
width: 300px;
height: 600px;
background-color: purple;
}
<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>
</div>
Vucko's answer is correct. I wanted to add a comment, but since I don't have enough reputation yet, I'll just post it as an answer.
You can use the vertical-align property on the inner div that needs centering. This property only works on elements that have display:inline-block or display:table. Refer to the actual spec here.
Repeating Vucko's answer:
.options {
display: inline-block;
vertical-align: middle;
}
You can use inline-block instead of float, and than you can use the vertical-align property:
.plan-container>div{
display: inline-block;
vertical-align: middle;
}
JSFiddle
However, beware of the whitespace issue.
Try it-
.plan-container {
display: flex;
flex-wrap: wrap; /* optional. only if you want the items to wrap */
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
What I am trying to do is:
HTML
<footer>
<!-- ... -->
<span class="copyright">abc</span>
</footer>
CSS (sass)
footer {
// ...
text-align: center;
> .copyright {
position: absolute;
bottom: 0;
display: inline-block;
}
}
So simply to pull the copyrigh down to the bottom of the parent block and center it. It's pretty easy using position: absolute, however, the centering the way using display: inline-block on the child element and text-align: center on the parent element wouldn't work then.
Is it possible to put the copyright down while keeping it relative?
Flexbox can do that if the height of the parent is defined or resolvable.
Complete Codepen Demo
footer {
height: 150px;
width: 80%;
margin: auto;
border: 1px solid red;
display: flex;
flex-direction: column;
}
header {
background: plum;
}
.copyright {
margin-top: auto;
/* push to bottom */
background: red;
align-self: flex-start;
/* collapse to own width */
margin-left: auto;
/* centering */
margin-right: auto;
}
<footer>
<header>I'm a header</header>
<span class="copyright">Copyright</span>
</footer>
Although I agree flexbox can be used, its browser support is not awesome on IE (Caniuse).
I would use just simple block with text-centering.
JS Fiddle
Here it is in simplicity:
footer {
border: 1px solid #900;
}
footer > .copyright {
padding: 50px 0 10px;
text-align: center;
}
If you really need to use inline-block, add this to copyright CSS:
display: inline-block;
width: 100%;
I have the following problem. I have a container which is responsive so it will be the width of the browser. Or when the browser is large enough there will be a sidebar displayed next to it.
Inside this div I have about 10 items with the following css:
display:block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
float:left;
So they form a grid.
At this point what happens is that when the container div is 440px width for example. They will diplay nicely 2 on each row. But when the width of the container is 600 for example. still 2 are diplayed with a large white area on the left.
Now I want to center them. So the 2 should be centered in the container. I tought I would do this by adding another container warpping the elements and giving it a margin:auto; But that doesnt work:
Fiddle: http://jsfiddle.net/kqvcnugs/
So how do I make sure the items are always in the middle?
Thank in advance!
Do you mean this?
http://jsfiddle.net/kqvcnugs/7/
In your case, just set to a display: inline-block; and parent div text-align: center;
But short description is:
.parent { text-align: center; }
.children { display: inline-block; }
Good luck!! :)
Like this: stackoverflow post
You can make use of CSS3 flexible box layout.
justify-content: center on the parent container will align it to
the center horizontally.
flex-wrap: wrap will make sure the
blocks wrap to next line instead of resizing.
body {
width: 100%;
background: blue;
}
div {
background: red;
overflow: hidden;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
a {
display: block;
width: 200px;
height: 200px;
background: tomato;
margin: 10px;
float: left;
}
<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
Instead of using float, you can use display:inline-block; and then give text-align:center; to the parent element.
body{
width: 100%;
background: blue;
}
div {
background: red;
overflow:hidden;
/* Add text-align:center; */
text-align: center;
}
a{
/* Change to display:inline-block; remove float */
display:inline-block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
}
<body>
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
</body>
Jsfiddle
you can try this one:
body{
width: 100%;
background: blue;
}
div {
background: red;
overflow:hidden;
text-align: center;
}
a{
display:inline-block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
}
DEMO HERE
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is. Boxes have to stay 100px by 100px.
Here is a rough illustration of what I mean: http://s14.postimg.org/58xunsv0h/example_of_boxes.png
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
You have two very simple ways to do that.
If you are targeting modern browsers, then you could make use of the CSS3 flex model. This is the simplest method. You won't have to change anything in your markup. Of course, I would suggest using the footer tag instead of div, because it semantically is a footer.
In this example, I am omitting browser prefixes for two reasons: (1) brevity of this snippet, and (2) most modern browsers now don't need prefixes for this. This example snippet works perfectly as-is in IE-11, FF-34 and GC-39.
The trick is to use the justify-content: space-around; property to distribute the spacing evenly between the divs. Remember, that space-around will cause the space before the first div and space after the last div to be half of the spacing between divs. This will cause, the spacing after the last div to be large because of the size of the div. To mitigate this, use margin: auto.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
And: http://dev.w3.org/csswg/css-flexbox/#propdef-justify-content
Fiddle: http://jsfiddle.net/abhitalks/j8fpp0so/2/
Snippet:
footer {
background-color: #000; opacity: 0.7;
height: 200px;
display: flex;
justify-content: space-around; /* this is important */
align-items: center; text-align: center;
}
footer > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<footer>
<div></div>
<div></div>
<div></div>
<div></div>
<footer>
If you really need to support older browsers i.e. back up to IE-8, FF-31, GC-31 etc., then you could make use of display:table and display:table-cell to achieve that. This is also very simple, but you would have to change your markup a little bit. Just wrap your inner-divs inside wrapper-divs. Apply display to the footer container and the wrapper-divs.
The trick here is to use the display:table-cell on the wrapping divs which, will cause them to evenly distribute. But, this will cause them to stretch. To mitigate this, we apply vertical-align to the wrapper divs and also a margin: auto to the inner divs.
Fiddle: http://jsfiddle.net/abhitalks/Lvysyuuh/
Snippet:
#footer {
background-color: #000; opacity: 0.7;
width: 100%; height: 200px;
display: table; /* this is important */
}
#footer > div {
display: table-cell; /* this is important */
text-align: center; vertical-align: middle; /* this is important */
}
#footer > div > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<div id="footer">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div>
//HTML BLOCK
<div id="footer">
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div>
//CSS BLOCK
#footer {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items:center;
width: 100%;
background: black;
opacity: 0.7;
height: 200px;
}
.fbox {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
margin: 0 auto;
border: 5px outset #ea2f2f;
}
Alternative to flex box if you can't use that for compatibility reasons:
The formula for the width of the space between blocks is (footer_width - 4*box_width)/5. Basically you've got a percentage width minus a fixed width: footer_width/5 - 4*box_width/5 ->
20% of footer width - 4*110px/5 -> 20% - 88px. Note the boxes actually take up 110px because of the border. We can do this at least two ways:
Using float:
You want 20% - 88px between each box. Float each box to the left with a margin-left of 20%. Then pull the boxes to the left by setting a negative right margin on each box. this does not effect the first box, but does make the space between boxes correct, so position all of them relatively and move them over 88px to the left.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
float:left;
margin-left:20%;
margin-right:-88px;
position:relative;
left:-88px;
top:45px;
}
This way feels a little fragile to me, but I can't immediately see why...
Using absolute positioning:
You want 20% - 88px between each box. Start with the first box. Move it over 20%, then back left 88px by using the left and margin-left properties. Next box we need to move the same, but from the right edge of the first box, so we need to move it over 20% - 88px + 110px to get to the right edge of the first box, then the +20% - 88px again, giving 40% - 66px. Repeat for each box. You can see the pattern below. Note the position:relative on #footer.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: absolute;
top:45px;
}
#fbox1 {
left: 20%;
margin-left: -88px;
}
#fbox2 {
left: 40%;
margin-left: -66px;
}
#fbox3 {
left: 60%;
margin-left: -44px;
}
#fbox4 {
left: 80%;
margin-left: -22px;
}
You might also be able to use inline-block with text-align:justify as seen here: "text-align: justify;" inline-block elements properly?
Hope this helps!
EDIT:
Just noticed your req that they be vertically centered as well. In this case, because you have a fixed height container and fixed height boxes, in both cases above you just have to nudge each box down by (200px - 110px)/2 = 45px which can be done with top:45px;.
I'm trying to use the table-cell way to center a div vertically and horizontally.
It works when I use the following code:
div {
display: table;
}
.logo {
display: table-cell;
position: absolute;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
But I'd rather wrap .logo in another div called .center like here JSFiddle, but for some reason, although it works in JSFiddle, it isn't working for me on my site.
Here is a good starting point.
HTML:
<div class="containing-table">
<div class="centre-align">
<div class="content"></div>
</div>
</div>
CSS:
.containing-table {
display: table;
width: 100%;
height: 400px; /* for demo only */
border: 1px dotted blue;
}
.centre-align {
padding: 10px;
border: 1px dashed gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top; /* Removes the extra white space below the baseline */
}
See demo at: http://jsfiddle.net/audetwebdesign/jSVyY/
.containing-table establishes the width and height context for .centre-align (the table-cell).
You can apply text-align and vertical-align to alter .centre-align as needed.
Note that .content needs to use display: inline-block if it is to be centered horizontally using the text-align property.
This would be easier to do with flexbox. Using flexbox will let you not to specify the height of your content and can adjust automatically on the height it contains.
DEMO
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>