如何将已经垂直对齐的菜单与等宽的列表项居中
[英]How to center an already vertically aligned menu with list-items of equal width
问题描述
I must centre the menu and its vertically aligned list items beneath the header "W".
我必须将菜单及其垂直对齐的列表项置于标题“W”下方。 The width of the menu should remain equal, set at 100px, but the closest I have come to maintaining that while centring it beneath the header "W" has only come to it being attached to screen-left.菜单的宽度应该保持相等，设置为 100 像素，但我最接近的是保持它，同时将其居中在标题“W”下方，只是将其附加到屏幕左侧。 No combination of display, margin, or padding has assisted in placing the menu consistently and dynamically beneath the already centred header "W".没有显示、边距或填充的组合有助于将菜单一致且动态地放置在已经居中的标题“W”下方。 I've run dry of ideas at the moment and would appreciate some assistance.我现在已经没有想法了，希望得到一些帮助。 How can it be accomplished?如何实现？
Here is my code:这是我的代码：
* { margin: 0; padding: 0; } body { background:#e8e8e8; } h1 { padding: 300px 0px 30px 0px; text-align: center; font-family: Raleway; font-weight: 100; font-size: 35px; } .menu { display: inline-block; text-align: center; border-radius:2px; width: 100px; } li { list-style:none; } li a { display: block; padding:25px 25px 25px 25px; letter-spacing:1px; font-family: Raleway; font-weight: 300; font-size:30px; color:#fff; text-decoration:none; text-transform:uppercase; transition:.25s; } .bg { position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; transition: .25s; pointer-events: none; } .menu li:first-child a { background:#d0d0d0 !important;} .menu li:nth-child(2) a { background:#b9b9b9 !important;} .menu li:nth-child(3) a { background:#a2a2a2 !important;} .menu li:nth-child(4) a { background:#8b8b8b !important;} .menu li:nth-child(5) a { background:#747474 !important;} .menu li:first-child:hover ~ .bg { background: #d0d0d0; } .menu li:nth-child(2):hover ~ .bg { background: #b9b9b9; } .menu li:nth-child(3):hover ~ .bg { background: #a2a2a2; } .menu li:nth-child(4):hover ~ .bg { background: #8b8b8b; } .menu li:nth-child(5):hover ~ .bg { background: #747474; }
<body> <h1>W</h1> <ul class="menu"> <li><a href="me">me</a></li> <li><a href="cv">cv</a></li> <li><a href="rd">rd</a></li> <li><a href="av">av</a></li> <li><a href="rr">rr</a></li> <li class="bg"></li> </ul> </body>
3 个解决方案
解决方案1
1 已采纳 2016-05-09 03:37:59
try this add body to text-align:center;试试这个将正文添加到 text-align:center;
* { margin: 0; padding: 0; } body { background:#e8e8e8; text-align:center; } h1 { padding: 300px 0px 30px 0px; text-align: center; font-family: Raleway; font-weight: 100; font-size: 35px; } .menu { display: inline-block; text-align: center; border-radius:2px; width: 100px; } li { list-style:none; } li a { display: block; padding:25px 25px 25px 25px; letter-spacing:1px; font-family: Raleway; font-weight: 300; font-size:30px; color:#fff; text-decoration:none; text-transform:uppercase; transition:.25s; } .bg { position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; transition: .25s; pointer-events: none; } .menu li:first-child a { background:#d0d0d0 !important;} .menu li:nth-child(2) a { background:#b9b9b9 !important;} .menu li:nth-child(3) a { background:#a2a2a2 !important;} .menu li:nth-child(4) a { background:#8b8b8b !important;} .menu li:nth-child(5) a { background:#747474 !important;} .menu li:first-child:hover ~ .bg { background: #d0d0d0; } .menu li:nth-child(2):hover ~ .bg { background: #b9b9b9; } .menu li:nth-child(3):hover ~ .bg { background: #a2a2a2; } .menu li:nth-child(4):hover ~ .bg { background: #8b8b8b; } .menu li:nth-child(5):hover ~ .bg { background: #747474; }
<h1>W</h1> <ul class="menu"> <li><a href="me">me</a></li> <li><a href="cv">cv</a></li> <li><a href="rd">rd</a></li> <li><a href="av">av</a></li> <li><a href="rr">rr</a></li> <li class="bg"></li> </ul> </body>
解决方案2
1 2016-05-09 03:39:55
A parent element with text-align: center should do the trick!带有text-align: center父元素应该可以解决问题！
* { margin: 0; padding: 0; } body { background:#e8e8e8; } h1 { padding: 300px 0px 30px 0px; text-align: center; font-family: Raleway; font-weight: 100; font-size: 35px; } .menu { display: inline-block; text-align: center; border-radius:2px; width: 100px; } li { list-style:none; } li a { display: block; padding:25px 25px 25px 25px; letter-spacing:1px; font-family: Raleway; font-weight: 300; font-size:30px; color:#fff; text-decoration:none; text-transform:uppercase; transition:.25s; } .bg { position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; transition: .25s; pointer-events: none; } .menu-wrap { text-align: center; }
<h1>W</h1> <div class="menu-wrap"> <ul class="menu"> <li><a href="me">me</a></li> <li><a href="cv">cv</a></li> <li><a href="rd">rd</a></li> <li><a href="av">av</a></li> <li><a href="rr">rr</a></li> <li class="bg"></li> </ul> </div> </body>
解决方案3
-1 2016-05-09 03:40:11
Add this to your body.将此添加到您的身体中。
to learn more about flexboxes, here's a fun game: http://flexboxfroggy.com要了解有关 flexbox 的更多信息，这里有一个有趣的游戏： http ://flexboxfroggy.com
body {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.