Center-Datei-Eingabe - Html/Css

Also Jungs, ich Baue eine website mit html, javascript und css, und ich habe ein file-input, aber für einige Grund es nicht völlig zentriert.

CSS:

body {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
}
#inp {
  text-align: center;
  margin: auto;
}

HTML:

<input id="inp" type="file" accept="image/*">

  • Aus diesem Teil des Codes können wir nicht sagen, was falsch ist, wenn man etwas mehr unterbrechen diese aber in deinem Beispiel-code sollte man die styles in den head-Bereich oder zumindest vor diesem Eingang
  • Arbeit ist in Ordnung, was ist das Problem ??
  • geben Sie die Breite für #inp wie 174px
  • siehe dieses jsfiddle: jsfiddle.net/49agf4h5
  • Ich denke, das Problem ist die Breite des Eingangs. Wenn Sie wählen Sie es, und sehen Sie die blauen highlight, es zeigt Ihnen, dass es breiter ist als der text und button.
InformationsquelleAutor Programmer | 2016-10-27
  1. 2

    Es funktioniert, können wir den gesamten code ?

    CSS:

    body {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
}
#inp {
  text-align: center;
  margin: auto;
}

    HTML:

    <body>
  <input id="inp" type="file" accept="image/*">
</body

    • ist hier mein code
    InformationsquelleAutor D. Schreier
  2. 0

    Nicht sicher, ob Sie das erreichen wollen, aber nehmen Sie einen Blick auf diese
    Fiddle

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

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

    Mehr Details zu den Browsern unterstützt : http://caniuse.com/#search=vw

    CSS3 eingeführt vw, vh Einheiten, die die Vorteile des sichtbaren Bildschirm-Größe. Hier ist ein Beispiel zeigt, wie Sie verwenden können diesen Wert einstellen width und height Eigenschaften der div - 100vw (was bedeutet, dass 100% der Sichtbaren Breite des Bildschirms) und 100vh (was bedeutet, dass 100% der Sichtbaren Breite des Bildschirms) :

    CSS:

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

    HTML:

    <div class="fullscreen table-cell valign-middle text-center">
  <input type="file" />
</div>

    InformationsquelleAutor Anwar
Schreibe einen Kommentar