如何对中跨度

Question

如何将下载按钮居中？我测试了很多次，但代码错了。

＆＃13;

＆＃13;

.col {
  width: 100%;
  height: auto;
  float: left;
}
.download {
  width: auto;
  font-weight: 600;
  font-size: 14px;
  color: #000;
  border: 2px solid #000;
  padding: 17px 37px;
  margin-top: 30px;
  float: left;
}

＆＃13;

<div class="col">
  <span class="download">Download</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将text-align: center;添加到.col，然后将float:left替换为按钮元素中的display:inline-block;即可。 jsfiddle

Answer 2

1. 从float:left;移除.download（因为它会强制元素向左浮动）。

2. 提供display:inline-block;（它的行为类似于inline元素，这意味着您可以通过向其父级提供text-align:center;来居中。）

JSFiddle

.col {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
}
.download {
    font-weight: 600;
    font-size: 14px;
    color: #000;
    border: 2px solid #000;
    padding: 17px 37px;
    margin-top: 30px;
    display: inline-block;
}