我有这段html代码:

<div id="main" style=" margin:0 auto; ">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>

我希望#main div在页面中心对齐。 我怎么能做到这一点? 谢谢!

===============>>#1 票数:5 已采纳

您必须为div设置width

<div id="main" style="margin:0 auto; width:700px;">

我也强烈建议您不要使用内联CSS。 而是在外部样式表中添加类似的内容:

#main {
   margin:0 auto;
   width:700px;
}
#main a {
   display:block;
}
#main > div {
   float:left;
}

===============>>#2 票数:2

<body>
<div id="main" style=" margin:0 auto; width: 960px;">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>
</body>

===============>>#3 票数:2

您在对Krister Andersson的评论中提到,无论宽度如何,都希望div居中。 但是您必须提供某种宽度信息。 如果要使div宽度灵活但居中,则需要设置特定的相等边距:

#main {
    margin: 0 50px; /* or whatever px, em, or % you want */
}

参见http://jsfiddle.net/jBYZq/

关键是,您必须设置元素的宽度并使用margin: 0 auto或将元素的边距设置为相等。 但是必须进行一些设置才能使其居中。

  ask by zuzuleinen translate from so

未解决问题?本站智能推荐:

2回复

在div的中心水平对齐多个图像

我有一个div,我想在该div的中心对齐多个图像。 所有图像的高度和宽度均为16像素。 问题是我既可以居中放置它们,又可以在下面留出额外的空间,但是当我使用display:block删除它时,它们又再次向左对齐。 这是我的代码: 我要包含图像的div: 上面的类具有一般所需的
1回复

将div与中心水平对齐的错误

我尝试使用这种方式使div居中:div height是:35.3em margin-top:calc(50% - (35.3em / 2)) 当我使用浏览器的宽度时,错误发生了,div以某种方式改变了他的水平位置 我的网站的网址: http : //cherry-rocks.hero
3回复

无法将隐藏的div对齐以在可见性上垂直和水平出现在页面中心

我无法将隐藏的div对准页面中心。 如果我将它们的位置设为相对,则当我将一页移到另一页时滚动会增加(即该div未垂直于页面中心对齐) 我应该将所有三个div放在一个容器div中吗? 请帮忙!!! 提前谢谢了.. 我正在使用的CSS是: 我使用的JavaSc
2回复

圆形div,垂直和水平中心对齐

我有以下代码: 如下所示: 如何使内部div垂直和水平出现在父级中间? 请帮忙... 先感谢您!
2回复

如何在列div的中心对齐`button-group`水平?

我试图将text-center添加到ul并且也large-centered到列而没有成功。 我相信有一个foundation课程来集中按钮组,但我找不到它。 http://jsfiddle.net/vZdbY/1/
1回复

在中心垂直和水平对齐DIV,而页眉和页脚不重叠

这是我关于stackoverflow的第一篇文章(对我来说很容易),这可能是一篇冗长且过度解释的文章。 请原谅我,我从来都不擅长轻易地传达我的观点。 基本上,我的页面包括5个div ... #wrap包含所有其他元素 #header标头 #main包含#imgc
6回复

将div中心的文本相对于页面对齐

有人可以解决我的问题吗? 我的页面上有一个标题,中间有一个div,右侧还有另一个div。 我想将H1中心的文本与整个页面对齐,我该怎么做? 我页面的样式是: 先谢谢您的帮助。
5回复

在div的中心对齐

说我有一个足球得分列表,每个都是div 如果我想说所有第一个字母都位于彼此下面,我知道如何对齐它们,但是我将如何做以使所有乐谱都位于彼此下面? 因此,意味着其他文本未对齐 确切的做法是在这里: http://www.bbc.co.uk/sport/football/prem
1回复

水平对齐div

我在外部div(“加载”的id)中水平对齐旋转圆圈动画(包含在div的id为“ spin-panel”的div)中时遇到了麻烦,如下所示: https : //codepen.io/depaolif/笔/ MoYwrP 有谁知道为什么margin: auto在这种情况下不会像通常那样起作用
27回复

如何将

这个问题在这里已有答案: 如何水平居中<div>? 101个答案 我有一个width设置为800像素的div标签。 当浏览器宽度大于800像素时 ,它不应该拉伸div ,但它应该将它带到页面的中间。