html - 如何将锚标签与中心的按钮对齐

Question

我有一个按钮链接，我想水平对齐中心。这是按钮的代码-

HTML：

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

PS :- 我不想使用<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; 
} 

工作小提琴

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 TAG：

<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;
}