Cannot center input of type file in html

Question

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?

You can use the CSS property text-align property with the value center on the parent container of the file input, which in this case is the form-group div : — Emin Abdullayev, May 13 '23 at 10:01
The text-center class is applied to a div element that contains the label element. This centers the label horizontally within its parent container. The d-flex class is applied to a div element that contains the file input element. This sets the display property of the element to flex, which allows us to use the justify-content-center class to center the element horizontally within its parent container. — Emin Abdullayev, May 13 '23 at 10:14

score -1 · Accepted Answer · answered May 13 '23 at 10:10

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.

Cannot center input of type file in html

1 Answers1