                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

关于块状元素div，包裹块状元素的问题

如代码所示，块状元素div包裹块状元素a，应该是div设置了a整个元素在一整行居中的，就是这个宽30的背景颜色在一整行居中的，为什么效果却是靠左？

如果div不是保证a整个元素居中，只是保证文字居中，而此处不具有优先级，那么可以解释。但是如果是这样，那么为什么a改为display:inline-block;之后，div却能保证a整个元素在一行居中呢？

不知道有没有人明白我的意思，求指点，谢谢

qq_夜深了飞_03660042

2016-07-28

源自：初识HTML(5)+CSS(3)-升级版 12-4

关注问题我要回答

1688

操作

收起

3 回答

慕勒3175023 回答被采纳 +3 积分
2016-07-28

我的理解是因为text-align针对line属性的，而对block属性不起作用

我就这么理解吧

block只是使元素变为一整块

line是是元素具有水平位置属性

因为我把你代码中display:block;改为display:line;他也居中了

0 回复有任何疑惑可以回复我~

收起回答

慕勒3175023

哦，刚又看了新一节，发现block是占据整行的，不存在居不居中的问题，之所以看起来是在左边，其实是因为限制了块的大小，其实它还是占据了整行的，只是改了大小后你只能看见它左边实际大小的一部分，右边的空白应该都是margin

2016-07-28 回复有任何疑惑可以回复我~

qq_夜深了飞_03660042 提问者回复慕勒3175023

嗯，应该是的，因为block是占据一整行的，不存在居中不居中的问题

2016-07-28 回复有任何疑惑可以回复我~

慕粉13167197305
2016-08-01

我理解的居中都是针对block的。对于div，因为div是占据一整行的block，所以我们看到的居中就是在一行里居中，其实就是在div的block里居中；而对于inline-block的a来说，它的block就是我们看到的粉色方块，所以设置居中元素就是在这个粉色方块里居中，因为它的block就这么大，它并不能占据一整行。

0 回复有任何疑惑可以回复我~

收起回答

各安天命
2016-08-01

那怎么把两个div放在同一行呢？不能用“display:inline-block;”吗？

0 回复有任何疑惑可以回复我~

收起回答

慕粉13167197305

讲道理如果要求他们都是block的话应该做不到吧，因为block定义里讲了每个block都要占据一整行，但如果把他们变成inline-block应该就可以做到了吧。

2016-08-01 回复有任何疑惑可以回复我~

qq_夜深了飞_03660042 提问者

把两个div放在一行： 1,如果是<div><div></div></div>的模式，可以使用两种方式:a.用div：inline-block，将内层的div转变为内联元素，因为内联元素是不用占一行的，所以它可以跟外层div占同一行;b.使用层模型的绝对定位，为内层div设置一定宽度和高度，设置其为绝对定位，当然，外层div也需要被定位，但不一定是绝对定位。绝对定位的作用是将元素从文档流中拖出来，使其相对于最接近的具有定位属性的父包含块具有绝对定位，如果不包含这样的父包含块则相对于body元素。

2016-08-01 回复有任何疑惑可以回复我~

qq_夜深了飞_03660042 提问者

2,如果是<div></div><div></div>的模式，可以使用浮动模型，float：left；两个块状元素都需要设置为浮动，可以实现两个div占同一行。希望有所帮助

2016-08-01 回复有任何疑惑可以回复我~