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

标签 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>

最佳答案

尝试添加样式“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>

关于html - 如何垂直对齐输入文件按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42886949/

上一篇：javascript - 如何在 NAV 元素中水平居中按钮

下一篇：jquery - 表格在 Firefox 中的 jQuery.toggle() 之后留下边距

相关文章：

javascript - 如何在不缩放内容的情况下使 div 可滚动？

javascript - Css/JS 在碰撞时隐藏元素

jquery - 如何拆分包含一组字符串的变量

css - 如何用随机颜色填充 svg？

javascript - 无法读取表单中未定义错误的属性 'value'

python - 无法在 python Flask 应用程序中向 SQL 数据库添加注释

php - 使用php从mysql中搜索以逗号分隔的多行

html - child 相对于滚动祖 parent 的绝对位置

.class 中的 CSS h1-h3 颜色

iphone - 网页可以向左拖动并在移动 View 中放大/缩小

©2024 IT工具网  联系我们