ボタンをその行の中央に移動したいですか？私はそのラインの中央に私のボタンを移動したい

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

の左側に表示されます単にcenterタグを使用してください。

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

または使用CSS text-alignプロパティ

.fileUpload { 
    text-align:center; 
} 

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>

をお試しください3210

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

.fileUploadで使用text-align: center。

.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 6

このページレイアウトに依存し、ちょっとブートストラップあなたが使用しているについて行くには、いくつかの方法があります。だから、あなたは以下のコードを試すことができます。

• あなたはここにmargin:0 auto;

• またはcssdeck.comを使用して、コンテナが