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>
디스플레이 : 블록; 블록 레벨 항목이 자동으로 상위 컨테이너를 채 웁니다. 이 [answer on SO] (http://stackoverflow.com/a/5251088/1456318)를 참조하십시오. – michaPau