0
残りのすべてのフォーム要素は、入力ファイルのボタンを除いて中央にあります。入力ファイルボタンを縦に整列する方法は？
私が試してみた：中央にそれを取得するには
.box {
display: block;
margin: 0 auto;
}
を、それはまだ左揃えです。 Chromeデベロッパーツールを見ると、幅全体を占めるように見えますが、なぜ私は決して設定しないのかわかりません。width
誰かが私を助けてくれたら大いに感謝します。
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
/*General styling & remove auto styling*/
body {
margin: 0;
}
button {
border: none;
font-family: 'Roboto', sans-serif;
cursor: pointer;
background-color: rgba(15, 72, 204, 0);
}
/*Remove auto styling*/
.submit:focus,
.close:focus,
.inputfile:focus + label {
outline: white auto 5px;
}
.form-screen {
background: #3472FF;
color: white;
font-family: 'Roboto', 'sans-serif';
}
.close {
position: absolute;
top: 20px;
right: 20px;
font-size: 2em;
color: white;
}
.close:hover {
color: #d8d8d8;
}
.form-wrapper {
padding-top: 5%;
padding-bottom: 5%;
}
.form-wrapper h1 {
text-transform: uppercase;
font-weight: 500;
text-align: center;
font-size: 3em;
}
/*Style input file*/
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
z-index: -1;
}
.inputfile + label {
max-width: 80%;
font-size: 1.4em;
font-weight: 500;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
display: inline-block;
overflow: hidden;
padding: 20px 20px 20px 20px;
}
.inputfile + label svg {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
margin-top: -0.25em;
/* 4px */
margin-right: 0.25em;
/* 4px */
}
/* style 1 */
.inputfile-1 + label {
color: #3472FF;
background-color: white;
}
.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
background-color: #d8d8d8;
}
/*Form input elemnts*/
input[type="text"],
.submit, .box {
display: block;
margin: 0 auto;
}
input[type="text"] {
cursor: text;
border: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #3472FF;
font-size: 2em;
padding: 20px 20px 20px 20px;
margin-bottom: 40px;
width: 60%;
}
input[type="text"]::-webkit-input-placeholder {
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #3472FF;
font-size: 1em;
}
input[type="text"]:-ms-input-placeholder {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #3472FF;
font-size: 1em;
}
input[type="text"]:-moz-placeholder {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #3472FF;
font-size: 1em;
}
input[type="text"]::-moz-placeholder {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #3472FF;
font-size: 1em;
}
.submit:hover {
background-color: #d8d8d8;
}
.submit {
background-color: white;
color: #3472FF;
font-size: 2em;
text-transform: uppercase;
padding: 20px 20px 20px 20px;
border-radius: 7px;
border: none;
}<div class="form-screen">
<button class="close"><span class="icon-x"></span></button>
<form method="post" enctype="multipart/form-data">
<div class="form-wrapper">
<h1>Upload Photo</h1>
<div class="box">
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
<label for="file-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
</svg>
<span>Choose a file…</span>
</label>
</div>
<button type="submit" class="field submit" name="submit" value="submit">Upload Photo</button>
</div>
</form>
</div>
表示：ブロック;ブロックレベルの項目が自動的に親コンテナを埋めるようにします。これを参照してください[答えはSO]（http://stackoverflow.com/a/5251088/1456318） – michaPau