HTML：

<a href="#"><button class="downloadButton">Download</button></a>
现在，我想在中心对齐它，请为此建议一个可能的CSS，你可以在JS Fiddle找到这个小提琴

P.S。： - 我不想使用<center>标记

Answer 1

Working FIDDLE Demo 的

为什么在button中使用a。您只能使用a。并将父级的text-align设为center。

<div class="center">
    <a href="#" class="downloadButton">Download</a>
</div>

父母的CSS：

.center { text-align: center; }

为链接设置padding：

.downloadButton { padding: 7px 20px 8px 20px; }

Answer 2

试试这个：

body{ /* or parent element */
    text-align: center;
}
a{
    /* wraps this element according to width of the child element.(here) */
    display: inline-block; 
}

Working Fiddle

Answer 3

你在这里： http://jsfiddle.net/594DY/1/

a {
    display: block;
    margin: 0 auto;
    width: 150px;
}

Answer 4

如果您想将整个按钮与a标记

对齐，请使用此选项

a {
        width: 150px;
        display: block;    
        margin-left: auto;
        margin-right: auto;
    }

如果您想在a标记

中对齐按钮中心，请使用此选项

a {
     width: 100%;
     display: block;    
     text-align: center;
  }

Answer 5

制作按钮中心的简单方法： HTML标签：

<a href="#"><button class="button" style="vertical-align:middle"><span>Login</span></button></a>

使用此CSS，添加一些可选样式：

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #E80C11;
  border: 5px;
  border-radius: 15px;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

如何将锚标记与中心的按钮对齐

HTML：

5 个答案: