开发者

How to center div

开发者 https://www.devze.com 2023-02-20 07:40 出处:网络
I want to set center an outer div alignment. There is some inner div which float is set to left. So outer div is not aligned center

I want to set center an outer div alignment. There is some inner div which float is set to left. So outer div is not aligned center my inner div css is 开发者_如何学编程:

.inner { 
  float:left; 
  margin:10px; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}


why is the inner div floated, if it's not needed just center the inner div?

.inner { 
  margin:10px auto; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}

OR if inner is floated so it contains further floats.. then you could add overflow hidden to it

.inner { 
  overflow: hidden;
  margin:10px auto; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}

or you could make inner into an inline block- and wrap it in a div with text-align: center;

<div class="outer">
<div class="inner"><span>float</span>the inner text</div>
<div class="inner"><span>float</span>the inner text</div>
<div class="inner"><span>float</span>the inner text</div>
<div>

.inner { 
  display: inline-block;
  margin:10px; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}

.inner {display: inline !ie7;}

span {float: left; width: 50px; height: 50px; background: #ffe;}

.outer {text-align: center;}


Without any more detail in your question all I can suggest is

<div style='margin: 0px auto;'>Blah</div>

But it does rather depend on what else you have going on.


The easiest way is to set the horizontal margins to auto:

<div style="margin-left: auto; margin-right: auto;">Content</div>

But it depends on its float attribute as well. Since I don't know what else you have on your site, I can only recommend for you to try different float attributes (left, right, none).

Good luck! :)


try:

<div align="center" style="clear:left"> 
...
</div>


This is the simplest method:

Provided you set a fixed width, and the proper DOCTYPE of course, try this

    Margin-left:auto;
    Margin-right:auto;

Hope it helps.

0

精彩评论

暂无评论...
验证码 换一张
取 消