如何使用div标签集中我的整个Web应用程序？

My JSF web application is left aligned and it looks odd. I wanted to make its appearance centered in all browsers.

我的JSF Web应用程序左对齐，看起来很奇怪。我想让它的外观集中在所有浏览器中。

I tried this and it didn't work:

我试过这个并没有用：

#main {
margin:0 auto; 
text-align:center; 
}

I also tried:

我也尝试过：

div align="center"...

div align =“center”......

inside html body, but no use.

在html体内，但没有用。

How can I center #main?

我怎样才能居中#main？

7 个解决方案

#1

try

尝试

#main{
  margin: 0px auto;
}

Also remember to set a width else it will be 100% causing it to be the whole page making it look left aligned.

还记得设置一个宽度，否则它将是100％，使它成为整个页面，使其看起来左对齐。

#2

#main {
    margin: 0 auto;
    width: 960px; /* or whatever you like */
}

#3

#main needs a fixed width for this to work: http://jsfiddle.net/RVpUQ/1/

#main需要一个固定的宽度才能工作：http：//jsfiddle.net/RVpUQ/1/

#main {
    margin:0 auto;
    width: 55px;
}

#4

You need a width and to set the margin to auto

您需要宽度并将边距设置为自动

#5

You need to add a width as well.

您还需要添加宽度。

#main {
  margin:0 auto; 
  width: 75%;
  text-align:center; 
}

#6

<html>
 <body>
    <div class="divContainer">
        <div class="divCentral">
            <h1>My content herer</h1>
        </div>
     </div>        

 </body>
</html>

and CSS is

和CSS是

.divContainer
{
  background-color:gray;
  width:100%;
  min-height:500px;
}
.divCentral
{
 width:90%;
 background-color:white;
 min-height:480px;
 margin:0 auto;
}

Here is the sample http://jsfiddle.net/eptGU/4/

以下是http://jsfiddle.net/eptGU/4/的示例

#7

You can use css setting it like this :

您可以使用css设置如下：

this goes on the div style:

这就是div风格：

border: 1px solid white; height: 90%; margin-left: auto; margin-right: auto; top: 0px; position: relative; width: 879px;

边框：1px纯白色;身高：90％; margin-left：auto; margin-right：auto;顶部：0px;位置：相对;宽度：879px;

so you define a width for the div and then browser autocenters it.

所以你定义div的宽度然后浏览器自动中心。

and you must set the following attribute into the body style:

并且您必须将以下属性设置为正文样式：

text-align:center;

文本对齐：中心;

this goes on the style of the body tag of the page this makes iexplorer implements the correct behavior.

这取决于页面的body标签的样式，这使得iexplorer实现了正确的行为。

#1

try

尝试

#main{
  margin: 0px auto;
}