                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /初識HTML(5)+CSS(3)-升級版

關(guān)于塊狀元素div，包裹塊狀元素的問題

如代碼所示，塊狀元素div包裹塊狀元素a，應(yīng)該是div設(shè)置了a整個元素在一整行居中的，就是這個寬30的背景顏色在一整行居中的，為什么效果卻是靠左？

如果div不是保證a整個元素居中，只是保證文字居中，而此處不具有優(yōu)先級，那么可以解釋。但是如果是這樣，那么為什么a改為display:inline-block;之后，div卻能保證a整個元素在一行居中呢？

不知道有沒有人明白我的意思，求指點(diǎn)，謝謝

qq_夜深了飛_03660042

2016-07-28

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

關(guān)注問題我要回答

1735

操作

收起

3 回答

慕勒3175023 回答被采納 +3 積分
2016-07-28

我的理解是因?yàn)閠ext-align針對line屬性的，而對block屬性不起作用

我就這么理解吧

block只是使元素變?yōu)橐徽麎K

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

因?yàn)槲野涯愦a中display:block;改為display:line;他也居中了

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕勒3175023

哦，剛又看了新一節(jié)，發(fā)現(xiàn)block是占據(jù)整行的，不存在居不居中的問題，之所以看起來是在左邊，其實(shí)是因?yàn)橄拗屏藟K的大小，其實(shí)它還是占據(jù)了整行的，只是改了大小后你只能看見它左邊實(shí)際大小的一部分，右邊的空白應(yīng)該都是margin

2016-07-28 回復(fù) 有任何疑惑可以回復(fù)我~

#2

qq_夜深了飛_03660042 提問者回復(fù) 慕勒3175023

嗯，應(yīng)該是的，因?yàn)閎lock是占據(jù)一整行的，不存在居中不居中的問題

2016-07-28 回復(fù) 有任何疑惑可以回復(fù)我~

慕粉13167197305
2016-08-01

我理解的居中都是針對block的。對于div，因?yàn)閐iv是占據(jù)一整行的block，所以我們看到的居中就是在一行里居中，其實(shí)就是在div的block里居中；而對于inline-block的a來說，它的block就是我們看到的粉色方塊，所以設(shè)置居中元素就是在這個粉色方塊里居中，因?yàn)樗腷lock就這么大，它并不能占據(jù)一整行。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

各安天命
2016-08-01

那怎么把兩個div放在同一行呢？不能用“display:inline-block;”嗎？

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕粉13167197305

講道理如果要求他們都是block的話應(yīng)該做不到吧，因?yàn)閎lock定義里講了每個block都要占據(jù)一整行，但如果把他們變成inline-block應(yīng)該就可以做到了吧。

2016-08-01 回復(fù) 有任何疑惑可以回復(fù)我~

#2

qq_夜深了飛_03660042 提問者

把兩個div放在一行： 1,如果是<div><div></div></div>的模式，可以使用兩種方式:a.用div：inline-block，將內(nèi)層的div轉(zhuǎn)變?yōu)閮?nèi)聯(lián)元素，因?yàn)閮?nèi)聯(lián)元素是不用占一行的，所以它可以跟外層div占同一行;b.使用層模型的絕對定位，為內(nèi)層div設(shè)置一定寬度和高度，設(shè)置其為絕對定位，當(dāng)然，外層div也需要被定位，但不一定是絕對定位。絕對定位的作用是將元素從文檔流中拖出來，使其相對于最接近的具有定位屬性的父包含塊具有絕對定位，如果不包含這樣的父包含塊則相對于body元素。

2016-08-01 回復(fù) 有任何疑惑可以回復(fù)我~

#3

qq_夜深了飛_03660042 提問者

2,如果是<div></div><div></div>的模式，可以使用浮動模型，float：left；兩個塊狀元素都需要設(shè)置為浮動，可以實(shí)現(xiàn)兩個div占同一行。希望有所幫助

2016-08-01 回復(fù) 有任何疑惑可以回復(fù)我~