如何让DIV中的DIV居中?

发布网友发布时间：2022-05-12 00:02

我来回答

共3个回答

热心网友时间：2022-05-13 18:40

1.先说文字居中。

此处是垂直居中，关键代码height:105px;line-height:105px;两个值要相等。

2.文字横向居中，关键代码text-align:center

<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'>ju zhong</div>

3.图片居中,代码如下。

4.图片垂直居中，关节代码display: table-cell; vertical-align:middle;

代码如下；

热心网友时间：2022-05-13 19:58

你的5个子div宽度之和刚好是父div宽度,所以,只要将父div居中就行了,通常可以这样做
.div1{width:960px;height:335px;margin:0 auto;}
但效果也要取决于你div1的父元素.如果div1宽度不固定,那么,可以这样
.div1{height:335px;text-align:center;}
.div2{width:192px;height:335px;display:inline-block;text-align:left;}
但有可能会受空格影响.

热心网友时间：2022-05-13 21:32

楼主，按照你的描述，有两个需求

1.让div1在页面内居中
2.让div2在div1内居中

第一条很好实现，在div1的css上加上margin:0 auto即可
第二条如果要实现的话，一定要用一个div包住所有的div2，然后在这个新的div上同样加上margin:0 auto这样才能居中。

因为你使用了float来脱离页面文档流，所以只能这样实现。
比较巧的是，你的例子刚好内外宽度相等，所以看起来是一样的。