Question

我正在制作具有响应性的水平菜单，在向下滚动时在背景中淡化（使用jQuery实现）。

所以我试图将我的菜单放在中心而且我失败了，我在css的ul元素中使用了width: 50%;，但它并没有使菜单居中。

.container {
  width: 100%;
  height: 2000px;
  position: relative;
  font-family: 'Trebuchet Ms';
}

.bg {
  background: #000;
  width: 100%;
  height: 100px;
  opacity: 0;
}

.show {
  opacity: 0.4;
}

.transition {    
  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

ul {
  height: 200px;
  margin: -70px 0 0;
  width: 50%;
}

li {
  direction: rtl;
  float: right; 
  list-style: none;
  padding-right: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
}

a {
  text-align: center;
  font-size: 50px;
  color: #bdbdbd;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 5px;
  text-shadow: 1px 1px 1px #949494;

  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: block;
}

a:hover {
  color: #a6a6a6;
  text-shadow: 1px 1px 1px #C9C9C9;
}

.down {
  top: 150px;
}

.up {
  top: 1800px;
}

HTML：

<div id="top" class="container">

            <div class="fixed">

              <div class="bg transition"></div>

              <ul>
                <li>אודות</li>
                <li>למה אנחנו?</li>
                <li>What To Eat</li>
                <li>צור קשר</li>
                <li>Get App</li>
              </ul>

            </div>

            <a href="#bottom" class="scroll down">SCROLL DOWN</a>
            <a href="#top" id="bottom" class="scroll up">SCROLL UP</a>

          </div>

JSFiddle

如何以反应灵敏的方式集中我的菜单？

Answer 1

对于居中元素，还没有任何特定的样式。尝试

保证金：0自动;

Answer 2

尝试使用flex on ul with justify-content：center

这

ul {
  height: 200px;
  margin: -70px 0 0;
  width: 50%;
}

要

ul {
  height: 200px;
  display:flex;
  justify-content: center;
}

https://jsfiddle.net/mz61tam2/3/

Answer 3

我通常使用Flexbox来中心项目。使包含div显示：flex，然后您可以将内容对齐并对齐到中心。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

请尝试：父级为text-align:center;，UL菜单为margin:0 auto;。

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  width: 100%;
  z-index: 1;
text-align:center;
}

ul {
  height: 200px;
  margin: -70px auto 0 auto;
  width: 50%;
}

中心响应式菜单

4 个答案: