英文:
Cannot center input of type file in html
问题
有以下代码：
<div class="container mt-5 text-center">
<form method="POST" action="{{ url_for('view') }}" enctype="multipart/form-data">
<div class="form-group">
<label for="file">选择文件:</label>
<input type="file" class="form-control-file file-input" name="file" id="file">
</div>
<button type="button" class="btn btn-primary" onclick="confirmAction()">上传</button>
<a href="{{ url_for('upload') }}" class="btn btn-secondary">取消</a>
</form>
</div>
尝试将文件输入框的类（class）更改为form-control，以确保它被居中。
英文:
I have the follwoing code:
<div class="container mt-5 text-center">
<form method="POST" action="{{ url_for('view') }}" enctype="multipart/form-data">
<div class="form-group">
<label for="file">Choose file:</label>
<input type="file" class="form-control-file file-input" name="file" id="file">
</div>
<button type="button" class="btn btn-primary" onclick="confirmAction()">Upload</button>
<a href="{{ url_for('upload') }}" class="btn btn-secondary">Cancel</a>
</form>
</div>
I'm trying to center it on the page and the problem is that the file input cannot be centered. The buttons and the labels were centered, but the input remains of the left side of the page. Do you have any suggestions?
答案1
得分: -1
在 div 标签之前添加这个样式标签：
<style>
.centered-form {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
通过应用这个样式，表单元素，包括文件输入，应该居中显示在页面上。根据需要调整样式以匹配您期望的布局。
英文:
Add this style tag ahead of div tag,
<style>
.centered-form {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
By applying this, the form elements, including the file input, should be centered on the page. Adjust the styling as needed to match your desired layout.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论