Question

我尝试在CSS中使用position:center和middle。在HTML代码中，我尝试了align="center;middle"，但似乎没有任何效果。我需要按钮在页面中央对齐，而不是在左侧。我已经更换了几个代码，但仍然没有。角落也不会改变。

Fiddle

这是HTML代码：

<div id='cssmenu'>
  <ul>
  <li class='has-sub last' id="iefix">
    <a rel=nofollow href='#'><span>Choose a model</span></a>
    <ul>
      <li id="iefix"><a rel=nofollow href='#'><span>iPhone 3GS</span></a></li>
      <li id="iefix"><a rel=nofollow href='#'><span>iPhone 4</span></a></li>
      <li id="iefix"><a rel=nofollow href='#'><span>iPhone 4S</span></a></li>
      <li class='last'  id="iefix"><a rel=nofollow href='#'><span>iPhone 5</span></a></li>
    </ul>
  </li>
  </ul>
</div>

Answer 1

在第29行，您将按钮的float设置为left。将其更改为text-align:center;，按钮将居中

#cssmenu > ul > li {
  text-align:center;
}

然后，如果你定位a，你应该能够改变边界半径。

#cssmenu > ul > li > a {
  border-radius:10px;
}

Fiddle

Answer 2

text-align:center表示容器div，而display:inline-block表示ul的做法 - http://jsfiddle.net/LnSRb/3/

Answer 3

版本1：

#cssmenu ul {
  width: 165px;
    margin: 0 auto;
  list-style: none;
}

Demo

版本2：

#cssmenu ul {
  list-style: none;
    text-align: center;
}
#cssmenu > ul > li {
  display: inline-block;
}

Demo

Answer 4

尝试在“cssmenu”元素上设置固定宽度，然后添加margin：0 auto，如下所示：

#cssmenu {
    width: 205px;   
    margin: 0 auto;
}

然后，通过执行以下操作从ul菜单中删除填充：

#cssmenu ul {
    list-style: none;
    padding: 0;
}

希望这有帮助！

Answer 5

使按钮位于屏幕中央

<div class="wrapper">
    <button class="button">Hello</button>
</div>

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

尝试使用以下链接检查圆角： -

Rounded Corners

Answer 6

您需要进行这些更改。

<div id='cssmenu' style="width:980px; margin:auto;">
  <ul style="width:170px; margin:auto">

在中心对齐CSS按钮并添加圆角

6 个答案: