Geek Answers Handbook

How to center floating divs?

I want to focus on the three divs that appear in the layout below (all have "float: left"). Is it possible?

I don't mind having wrapper-divs.

Text-align: center and display: the inline block will not work with the code that I have.

enter image description here

+5
source share
8 answers

If you want to focus them, you cannot swim them. The best alternative would be to do them all display: inline-blockso that you can style them as a block element, and they will pay attention to your text-align: centerparent shell anyway . This would be a good solution for the limited example you provided.

, <span>, <div>, display: inline-block. IE7 , . IE6 , .

+19
div#wrapper {
    width:960px;
    margin: 0 auto;
}

http://jsfiddle.net/WyxHQ/1/

:

<div id="outer-wrapper">
    <div id="wrapper">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

HTML

div#outer-wrapper{
border:2px solid black;
    padding:10px;
    width:100%;
}

CSS

div#wrapper{
    width:99px;
    margin:0 auto;
} 

div {
    width:33px;
    height:20px;
}

div.one{
    background:red;
    float:left;
}

div.two{
    background:blue;
        float:left;
}

div.three{
    background:green;
        float:left;
}
+5

:

CSS:

.wrap
  {
    border:2px solid black;
    width:100%;
  }

ul
  {
    width:99px;
    margin:0 auto;
    height: 20px;    
  } 

ul li 
  {
    width:33px;
    height:20px;
    float: left;
    margin: 0px;
    padding: 0px;
  }

ul li.red 
  {
     background-color: red;   
  }

ul li.blue 
  {
     background-color: blue;   
  }

ul li.green 
  {
     background-color: green;   
  }

HTML:

    <div class="wrap">
      <ul>
        <li class="red"> </li>
        <li class="blue"></li>
        <li class="green"></li>
      </ul>
    </div>
+2

: http://jsfiddle.net/nvpXx/3/

divs inline-block .

HTML

<div id="main">
    <div class="wrap">
        <div class="item">thing 1</div>
        <div class="item">thing 2</div>
        <div class="item">thing 3</div>
        <div class="clear"></div>
    </div>
</div>

CSS

#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}

Pitfall

, , . div.wrap 100% , .

+2

, :

<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>

<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>

, - , - max-width:

<style>
@media screen and (max-width:520px){ ul li{float:none} }
</style>

+1

, , . , , .

0

, :

<body>
    <div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">   
        <div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
        <div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
        <div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
    </div>
</body>
0

, div.

Then add overflow: auto so that the div container wraps around the three divs and then sets the container div in the center with the field: 0 auto.

0
source

More articles:


All Articles