html - 按钮未居中对齐

Question

我设法让输入框响应，但按钮没有居中对齐

这是CSS代码

    .webdesigntuts-workshop button {
  background: linear-gradient(#333, #222);
  border: 1px solid #444;
  border-radius: 5px 5px 5px 5px;
  -webkit-box-shadow: 0 2px 0 #000;
  box-shadow: 0 2px 0 #000;
  color: #fff;
  display: block;
  font-family: "Cabin", helvetica, arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  margin: 20px;
  padding: 0 10px;
  padding-bottom: 2px;
  text-shadow: 0 -1px 0 #000;
  display: inline-block;
  width:100%;
  max-width:120px;
  float:center;

}   

这是整个 Codepen 链接

https://codepen.io/anon/pen/XZrqzZ

Answer 1

事实上，您的代码非常困惑。然而，问题不在于按钮，而在于输入。输入中的边距将其推出屏幕，因为您的宽度为 100%。因此，输入占用 100% 的屏幕加上边距，将其推出预期的布局。

在你的 CSS 中试试这个:

.webdesigntuts-workshop input{
  margin: 0;   /* Put 0 */
  width: 100%;
}

.webdesigntuts-workshop button {
  margin: 0 auto;   /* Add this */
}