i want to move my button to center of that line?

Question

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

this my div of the button field and below is the css script

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

i want to move my button to center of that line currently it appears at the left side of the page

Answer 1

Use text-align: center in .fileUpload. So you can try the code below:

.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

use

.fileUpload { 
  text-align:center;
 }

Try this code

.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

Use text-align: center; in fileUpload class.

Answer 4

Wrap you code in a div go through with my code for better understanding.

JSFiddle

HTML Code-

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

CSS Code-

.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

There are several ways to go about this depending on your page layout and the kinda bootstrapping you're using.

• you may create a separate div container for the button and center the container using margin:0 auto;

• or cssdeck.com here is one of the best ways

Answer 6

Simply use the center tag.

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

OR use css text-align property

.fileUpload { 
  text-align:center;
 }