我想将我的按钮移动到该线的中心？

Question

<div class="fileUpload btn btn-primary" >
<span>Upload Shows</span>
<input type="file" class="upload" />
</div>

这个按钮字段的div和下面是css脚本

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    align:center;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

我想将我的按钮移动到该行的中心，当前它出现在页面的左侧

Answer 1

在text-align: center中使用.fileUpload。所以你可以试试下面的代码：

.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
  line-height: 25px;
  text-align: center;
}
.fileUpload input.upload {
  position: absolute;
  margin: 0;
  padding: 0;
  text-align:center;
  font-size: 14px;
  cursor: pointer;
  filter: alpha(opacity=0);
}

Answer 2

使用

.fileUpload { 
  text-align:center;
 }

试用此代码

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
 
    text-align:center;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    align:center;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

<div class="fileUpload btn btn-primary" >
<span>Upload Shows</span>
<input type="file" class="upload" />
</div>

Answer 3

在fileUpload类中使用text-align: center;。

Answer 4

使用我的代码将代码包裹在div中，以便更好地理解。

JSFiddle

HTML代码 -

<div class="form-group text-center">
  <div class="fileUpload btn btn-primary">
    <span>Upload Shows</span>
    <input type="file" class="upload" />
  </div>
</div>

CSS代码 -

.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
  text-align: center;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  align: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

Answer 5

有几种方法可以解决这个问题，具体取决于您的页面布局和您正在使用的类型引导。

• 您可以为按钮创建单独的div容器，并使用margin:0 auto;

使容器居中

• 或cssdeck.com这是最好的方法之一

Answer 6

只需使用center标记。

<center><input type="file" class="upload" /></center>

或使用css text-align属性

.fileUpload { 
  text-align:center;
 }