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

豎直方向居中

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

qq_vibecisco_0

2016-04-28

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

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

755

操作

收起

4 回答

qq_vibecisco_0 提問(wèn)者
2016-04-29

我終于找到原因了：

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

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

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

收起回答

qq_vibecisco_0 提問(wèn)者
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)實(shí)效果有問(wèn)題，有問(wèn)題，沒(méi)有垂直居中?而是偏下了*/
????}

????.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;
????}