Html 将CSS按钮居中对齐并添加圆角

我试过在CSS中使用

position:center

和

middle

。在HTML代码中，我尝试了

align=“center；middle”

，但似乎没有任何效果。我需要的按钮是在页面的中心对齐，而不是在左边。我已经替换了好几个代码，但还是什么都没有。角落也不会改变

以下是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>

在第29行，您将按钮的

浮动设置为
左
。将此更改为
文本对齐：居中，按钮将居中

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

然后，如果以
a
为目标，则应该能够获得要更改的边界半径

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

在第29行，您将按钮的
浮动设置为
左
。将此更改为
文本对齐：居中，按钮将居中

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

然后，如果以
a
为目标，则应该能够获得要更改的边界半径

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

文本对齐：容器div的居中，ul的显示：内联块
执行技巧-
文本对齐：容器div的居中，ul的显示：内联块
执行技巧-
版本1:

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

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


第2版：

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

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

第1版：

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

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


第2版：

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

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

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

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

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

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

希望这有帮助
 尝试在“cssmenu”元素上设置固定宽度，然后添加边距：0自动，如下所示：

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

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

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

希望这有帮助
 使按钮位于屏幕中央

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

.wrapper {
    text-align: center;
}

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


你好
.包装纸{
文本对齐：居中；
}
.按钮{
位置：绝对位置；
最高：50%；
}

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

使按钮位于屏幕中央

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

.wrapper {
    text-align: center;
}

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


你好
.包装纸{
文本对齐：居中；
}
.按钮{
位置：绝对位置；
最高：50%；
}

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

您需要进行这些更改

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



您需要进行这些更改

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



HTML注释：ID是唯一的标识符。您不能对多个元素重用它们，因此您希望在这里使用类。另外，如果不是超链接，请不要使用
。
href='#'
的概念来自一个人们甚至都不记得的HTML版本。使用文本范围换行。如果您需要“这是一个可点击的东西！”使用css
cursor:pointer
规则，这样人们就会认为它是一个导航链接（
href='#'
意味着“导航到此页面的根目录”），HTML注释：ID是唯一的标识符。您不能对多个元素重用它们，因此您希望在这里使用类。另外，如果不是超链接，请不要使用
。
href='#'
的概念来自一个人们甚至都不记得的HTML版本。使用文本范围换行。如果你需要“这是一个可点击的东西！”使用css
cursor:pointer
规则，这样人们就会认为它是一个导航链接（
href='#'
的意思是“导航到此页面的根目录”），ul下的列表似乎失控了ul下的列表似乎失控了