Centering floating divs within another div
First, remove the float
attribute on the inner div
s. Then, put text-align: center
on the main outer div
. And for the inner div
s,
use display: inline-block
. Might also be wise to give them explicit widths too.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
How to Center Floated Divs in a Container
It is possible. Using http://www.pmob.co.uk/pob/centred-float.htm and http://css-discuss.incutio.com/wiki/Centering_Block_Element as a source.
Here is a fiddle demonstrating the concept, using the HTML and CSS from below: https://jsfiddle.net/t9qw8m5x/
<div id="outer">
<ul id="inner">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2 with long text</a></li>
<li><a href="#">Button 3</a></li>
</ul>
</div>
This is the minimum CSS needed for the effect:
#outer {
float: right;
position: relative;
left: -50%;
}
#inner {
position: relative;
left: 50%;
}
#inner > li {
float: left;
}
Explanation:
Start off with just the li { float: left; }
rule. Then wrap those floats in the left: 50%; relative position
, so the left edge of the <ul>
's box is in the horizontal centre of the page, then use the rules in #outer
to correctly adjust it so the centre of #inner
is aligned with the page.
How can I center a div within another div?
You need to set the width
of the container (auto
won't work):
#container {
width: 640px; /* Can be in percentage also. */
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
The CSS reference by MDN explains it all.
Check out these links:
- auto - CSS reference | MDN
- margin - CSS reference | MDN
- What is the meaning of
auto
value in a CSS property - Stack Overflow
In action at jsFiddle.
Vertically centering a div inside another div
tl;dr
Vertical align middle works, but you will have to use table-cell
on your parent element and inline-block
on the child.
This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.
The classic solution (table layout)
This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.
Here is an example
Tested in:
- FF3.5+
- FF4+
- Safari 5+
- Chrome 11+
- IE9+
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Modern solution (transform)
Since transforms are fairly well supported now there is an easier way to do it.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
Demo
♥ my favourite modern solution (flexbox)
I started to use flexbox more and more its also well supported now Its by far the easiest way.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Demo
More examples & possibilities:
Compare all the methods on one pages
Center multiple floating divs next to each other
You are specifying a pixel value for your width. No matter what you do with your floats, those pixel values are fixed and will never reach the end of the border. What you can do is set the width to a percentage like width: 33%;
. You could also set your left and right margins to space out your divs like margin: 0 20px;
.
What I typically do in these situations is wrap my elements in a div and use that div for positioning the elements. Then, the inner container I will use for background colors, text colors, etc. Something like that may work for you:
<div class="holder">
<div class="wrapper">
<div class="container">...</div>
</div>
<div class="wrapper">
<div class="container">...</div>
</div>
<div class="wrapper">
<div class="container">...</div>
</div>
</div>
And the CSS:
.wrapper {
float:left;
width:33%;
}
.container {
background-color: yellow;
margin: 10px;
padding: 20px;
}
Here is a fiddle: http://jsfiddle.net/bWFS8/
How to centre align floating DIVs within a parent DIV?
For .pck1
, pck2
and pck3
, remove float:left
and add display:inline-block
.
Floating an element is used to move it all the way to one side or the other (which obviously does the opposite of cetering). Preventing the "stacking" is a by-product of that, but there are other ways to keep elements from stacking. By default, divs have display:block
, which means they'll each display on their own line ("stacking"). By changing it to display:inline-block
, they display in-line.
Here is a demo.
Center multiple divs in another div?
Here's an alternate method if you can use an extra div:
<div class = "container">
<div class="centerwrapper">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
</div>
<style>
.square
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container
{
text-align:center;
width:450pt;
height: 80pt;
}
.centerwrapper
{
margin: auto;
width: 302pt;
}
</style>
Also, make sure you have a closing quote on your <div class = "container">
there. The code you pasted is missing one.
How to center two divs floating next to one another
You will have to automatically set the margin and probably a specific width to your wrapper div
<div id="wrapper"></div>
In your CSS:
#wrapper {
width: 70%;
margin: 0 auto;
}
Related Topics
Image Label for Input in a Form Not Clickable in Ie11
"Invalid Form Control" Only in Google Chrome
Possible to Style the CSS3 Resize Function
How to Create a Slanted Background with CSS
Vertically Centering a Div in Body
How to Display Source Code with Indent in a Web Page? HTML? CSS
Best Method for Creating a Pure HTML5 + CSS3 Animated "Sonar Wave" Icon
Remove Value Attribute of Input Element Using CSS Only
How to Preload a Page Using HTML5
How to Make Last Cell of a Row in a Table Occupy All Remaining Width
Grails: Displaying Created Image in Gsp
Generate Scroll Bar for Overflow to the Left
Why Is 100% Height Not 100% of the Browser Height