                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實戰(zhàn)

豎直方向居中

老師說了好幾遍的一個技巧：把line-height 與div的高度設(shè)置為一致，盒子里的內(nèi)容就會在豎直方向居中。但是我發(fā)現(xiàn)這個技巧沒用。我試了Chrome, Firefox, IE11 不用這樣設(shè)置就已經(jīng)直接豎直方向居中了,如果這樣設(shè)置的話，反倒是位于偏下的位置了。這是什么原因？

qq_vibecisco_0

2016-04-28

源自：企業(yè)網(wǎng)站綜合布局實戰(zhàn) 3-5

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

747

操作

收起

4 回答

qq_vibecisco_0 提問者
2016-04-29

我終于找到原因了：

*{
????margin:0；
????padding:0;
????font-size:?12px;
}

這里第一個“margin:0；”的“分號”我用的是中文輸入法狀態(tài)下的，改成英文輸入法下的分號就行了。就是因為這里的一個標(biāo)點，折騰了好久。

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

收起回答

qq_vibecisco_0 提問者
2016-04-29

*{
????margin:0；
????padding:0;
????font-size:?12px;
}
body{
????background-color:?#F5F5F5;
}

/*頂部區(qū)*/
.top{
????width:100%;
????height:27px;
????background:url(../images/top_bg.jpg)?repeat-x;
????}

????.top_content{
????????width:?1000px;
????????margin:?0?auto;
????????line-height:?27px;?/*垂直居中，但是現(xiàn)實效果有問題，有問題，沒有垂直居中?而是偏下了*/
????}

????.top_content?li{
????????float:right;
????????list-style-image:?url(../images/arrow.jpg);
????????width:70px;
????}

????.top_content?a:link,?.top_content?a:visited{
????????color:#8E8E8E;
????????text-decoration:?none;
????}
????.top_content?a:hover,?.top_content?a:active{
????????color:#C00;
????????text-decoration:?none;
????}