居中元素的問題

我正在爲我的菜單編寫代碼，這次使用CSS爲動畫和js將類從顯示更改爲隱藏和半隱藏。（我還沒有開始在js上）居中元素的問題

一些問題我不知道如何解決（變得非常緊張）。

爲什麼頂邊距不是0？
爲什麼在div與左邊和頂邊有一些padding/margin/wtv？
如何將鏈接垂直居中？（我想我需要使用100％，以保持和位置固定和溢出隱藏，因爲我需要移動的div屏幕之外）

html, 
 
body { 
 
    background: #E6E6E6; 
 
} 
 
.menu { 
 
    overflow: hidden; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    -webkit-transition: all ease .65s; 
 
    -moz-transition: all ease .65s; 
 
    -ms-transition: all ease .65s; 
 
    -o-transition: all ease .65s; 
 
    transition: all ease .65s; 
 
} 
 
.left { 
 
    right: 0; 
 
    margin-right: 0; 
 
} 
 
.left.bar { 
 
    right: 100%; 
 
    margin-right: -60px; 
 
} 
 
.left.hidden { 
 
    right: 100%; 
 
    margin-right: 0; 
 
} 
 
.menu > .links { 
 
    color: white; 
 
    font-family: sans-serif; 
 
    font-size: 2.5em; 
 
    font-weight: 500; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 
.menu li { 
 
    color: rgba(255, 255, 255, .75); 
 
    cursor: pointer; 
 
    list-style: none; 
 
    padding: 15px; 
 
    margin: 5px; 
 
    -webkit-transition: all ease 1s; 
 
    -moz-transition: all ease 1s; 
 
    -ms-transition: all ease 1s; 
 
    -o-transition: all ease 1s; 
 
    transition: all ease 1s; 
 
} 
 
.menu li:hover { 
 
    color: rgba(255, 255, 255, 1); 
 
    background: rgba(0, 0, 0, .1); 
 
} 
 
.m1 { 
 
    background: orange; 
 
    z-index: 8; 
 
}

<div class="menu left m1"> 
 
    <div class="links l1"> 
 
    <ul> 
 
     <li data-open=".m2">Architecture</li> 
 
     <li data-open=".m3">Coding</li> 
 
     <li data-open=".m4">Thesis</li> 
 
    </ul> 
 
    </div> 
 
</div>

Screenshot

來源

2014-10-27 JCML

下面的答案是正確的，我只是想強調，利潤/填充是瀏覽器默認樣式的一部分 - 並且還有更多。查看CSS重置 - http://meyerweb.com/eric/tools/css/reset/上最基本的重置。 – 2014-10-27 18:36:18

要刪除空間的左側和頂部，必須重寫你的UL的默認樣式：

ul{ 
    padding: 0; 
    margin: 0; 
}

和垂直居中，我會做這樣的：

.links ul{ 
    position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.links{ 
    height: 100%; 
}

檢查它在這裏：JSFiddle

來源

2014-10-27 18:04:05

感謝您的詳細解答。快速跟進問題，我怎樣才能讓li的寬度等於文本的寬度，而不會擾亂居中？ – JCML 2014-10-27 19:33:14

@JúlioCésarLuta你可以用'display：table'來實現，然後同樣居中，然後在這裏查看：http://jsfiddle.net/caeth/nyob56wf/3/ – 2014-10-27 19:36:04

再次感謝。什麼是救生員。 – JCML 2014-10-27 19:45:36

默認<UL>帶有填充，這就是爲什麼你會看到鏈接左側的間距。如果你設置了

.links ul {margin:0; padding:0;}

多餘的空間將被刪除。作爲建議，我建議將所有元素填充和邊距設置爲默認值0以幫助處理這些類型的問題。

* { 
    padding:0; 
    margin:0; 
}

對於垂直對齊的文本，如果您有文字這是所有你不能設置line-height是相同的高度，它的容器，將垂直對齊文本元素在同一行。

來源

2014-10-27 17:57:31 crazymatt

居中元素的問題

回答

相關問題