CODEWITHSUNDEEP
htmlcss
DLiKS
DLiKS

Reputation: 1596

How to Center Floated Divs in a Container

Is it possible to center floated divs in a container and if so how?

For example I have a page with a container div containing lots of variable sized (dynamically generated) floated (left) divs. The divs overflow onto the next line reguarly but they are never centered in the container div, instead alined with the left. It looks like this:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Whereas I would like the floated divs centered in the container like this:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Thanks,

DLiKS

Upvotes: 33

Views: 75439

Answers (6)

Ahmed_Fathy
Ahmed_Fathy

Reputation: 1

just beginner

.container{
width:80% ;height:100px ; border: solid 3px goldenrod; display: flex; flex-flow: row wrap; 
float: right; position: relative; right: 10%; }

.white{width:50%;height:50% ; background-color: honeydew;}

.blue{ width:50%;height:50%; background-color: indigo;}
<!--display flex & flex-wrap properties & chess board -->


  <div class="container" >
    <div class="white"></div> <div class="blue"></div>
    <div class="blue"></div>  <div class="white"></div> 
    
  </div>

Upvotes: 0

Carl Papworth
Carl Papworth

Reputation: 1332

With CSS3 you can also achieve this with flexbox:

HTML:

<ul id="flexcontainer">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

Min CSS:

#flex-container {
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

#flex-container > li {
    float: left;
}

Fiddle (with some styling for visualisation): https://jsfiddle.net/k5o37dff/4/

More about flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Browser support: https://www.w3schools.com/cssref/css3_pr_flex.asp

Upvotes: 0

dimmech
dimmech

Reputation: 877

Calculate the total amount of screen space width that the desired layout will occupy then make the parent the same width and apply margin:auto.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60px */
    margin: 10px;
    /* 6 borders x 10px = 60px */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}
<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382881

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.

Upvotes: 24

isildur4
isildur4

Reputation: 341

<div id='contain'><center><div id='content'>qwerty</div></center></div>

OR

<div id='contain'><div id='content'>qwerty</div></div>

<style type='text/css'>

#content   {

  width:200px;

  height:200px;

  margin:auto;
  /* margin:auto; requires width and i think height to be defined in nearly all browsers */

  }</style>

Upvotes: -6

Ted Gueniche
Ted Gueniche

Reputation: 813

A nice trick to center "div" element is to set "margin: auto", it will center them.

Upvotes: -6

Related Questions