如何垂直对齐输入文件按钮？

时间：2017-03-19 13:08:41

标签： html css forms

除了输入文件按钮之外，我的所有表单元素都在中心位置。

我试过了：

.box {
    display: block;
    margin: 0 auto;
}

要使它居中，但它仍然是左对齐的。看看Chrome开发者工具，似乎.box占据了整个宽度，但我不确定为什么，因为我从未设置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&hellip;</span>
                    </label>
                </div>
                <button type="submit" class="field submit" name="submit" value="submit">Upload Photo</button>
            </div>
        </form>
    </div>

4 个答案:

答案 0 :(得分：1)

尝试添加样式“text-align：center;”进入你的div盒...... 

@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" style="text-align: center;">
                    <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&hellip;</span>
                    </label>
                </div>
                <button type="submit" class="field submit" name="submit" value="submit">Upload Photo</button>
            </div>
        </form>
    </div>

答案 1 :(得分：1)

您需要指定.box的宽度才能居中。如果元素具有固定宽度且不显示，则以边距为中心工作：内联。

＆＃13;
＆＃13; 
input[type="text"],
    .submit, .box 
    {
        width: 300px; /* You can also use intrinsic if you want the box to have width, which stretches wide enough to accommodate its children, so that you don't need to guess numbers*/
        display: block;
        margin: 0 auto;
    }
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

使用clac（）尝试这样的事情：

<div class="box" style="margin-left:calc( 50vw - 120px)">

以下是fiddle

答案 3 :(得分：0)

你需要在.box中添加一个width属性，因为margin：auto;除非设置宽度，否则不起作用。

相关问题
最新问题