2016-10-27 5 views
2

Also Leute, ich baue eine Website mit HTML Javascript und CSS, und ich habe eine Datei-Eingabe, aber aus irgendeinem Grund wird es nicht vollständig zentriert werden.Center File Eingabe - Html/Css

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
#inp { 
 
    text-align: center; 
 
    margin: auto; 
 
}
<input id="inp" type="file" accept="image/*">

+0

von diesem Code Teil können wir nicht sagen, was passiert, wenn Sie in Ihrem Beispielcode mehr, dass dies etwas ist falsch unterbrechen kann, aber Sie die Stile in Kopfabschnitt vor oder zumindest stellen sollten Dieser Eingang – mamosek

+0

Arbeit ist in Ordnung, was ist das Problem? –

+0

geben Breite zu #inp wie 174px – chirag

Antwort

1

Es funktioniert gut, können wir den gesamten Code zu bekommen?

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
#inp { 
 
    text-align: center; 
 
    margin: auto; 
 
}
<body> 
 
    <input id="inp" type="file" accept="image/*"> 
 
</body

+0

hier ist mein Code – Programmer

0

Nicht sicher, ob Sie dies erreichen wollen, aber zu diesem Fiddle

#inp { 
    text-align: center; 
    margin: auto; 
    position: absolute; 
    top: 50%; 
    } 
0

CSS-Lösung für die meisten recents einen Blick Browser

Mehr Details zur Browser-Unterstützung : http://caniuse.com/#search=vw

CSS3 eingeführt vw, vh Einheiten, die die sichtbare Bildschirmgröße nutzen. Hier ist ein Beispiel, das zeigt, wie Sie diese Werte verwenden können, um width und height Eigenschaften Ihres div zu 100vw (was 100% der sichtbaren Breite des Bildschirms bedeutet) und 100vh (was 100% der sichtbaren Höhe des Bildschirms bedeutet) :

body { 
 
    margin : 0px; 
 
} 
 

 
.fullscreen { 
 
    width : 100vw; 
 
    height : 100vh; 
 
} 
 

 
.table-cell { 
 
    display : table-cell; 
 
    background : lightgrey; 
 
} 
 

 
.valign-middle { 
 
    vertical-align : middle; 
 
} 
 

 
.text-center { 
 
    text-align : center; 
 
}
<div class="fullscreen table-cell valign-middle text-center"> 
 
    <input type="file" /> 
 
</div>