居中元素的问题

我正在为我的菜单编写代码，这次使用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

居中元素的问题

回答

相关问题