                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

豎直方向居中

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

qq_vibecisco_0

2016-04-28

源自：企業網站綜合布局實戰 3-5

關注問題我要回答

761

操作

收起

4 回答

qq_vibecisco_0 提問者
2016-04-29

我終于找到原因了：

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

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

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

收起回答

qq_vibecisco_0 提問者
2016-04-29

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

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

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

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