How to align input text next to Edit Profile Picture?

Question

Hi Team

I have a HTML code, but i notice aligning is not good, meaning Chose file is stretch far from left instead of center just like an image and want to align it well. Please assist me on improving this logic below so UI can look good.

<div class="stu-db">
    <div class="container pg-inn d-flex justify-content-center align-items-center flex-column" style="max-width: 600px; padding: 15px;">
        <div class="text-center">
            <!-- Profile Image Section -->
            <img id="profile-preview"
                 src="<?php echo htmlspecialchars($_SESSION['profile_image'] ?? 'images/user.jpg'). '?' . time(); ?>"
                 alt="Profile Image"
                 class="img-fluid rounded-circle mb-3"
                 style="width: 150px; height: 150px;">
            <br><br>

            <!-- Form Section -->
            <form id="saveProfileForm" action="save_image.php" method="post" enctype="multipart/form-data">
                <div class="d-flex align-items-center mb-3" style="gap: 10px;">
                    <label for="profilePicture" class="form-label" style="white-space: nowrap;">Edit Profile Picture:</label>
                    <input type="file" class="form-control file-input" name="profilePicture" id="profilePicture" accept="image/*" required>
                </div>
                <button type="submit" class="btn btn-primary btn-lg mt-3">Save Image</button>
            </form>
        </div>
    </div>
</div>

<style>
.file-input {
    display: inline-block;
    max-width: 250px;
    padding: 5px;
    vertical-align: middle;
    text-overflow: ellipsis;
}

.form-label {
    margin-bottom: 0;
    font-weight: 500;
    margin-right: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.custom-file-input-wrapper input[type="file"] {
    width: 100%;
    text-align: right;
}
</style>

Markup

Copy

Answer 1

Hi Gcobani Mkontwana,

To enhance the alignment of the "Choose file" input in your HTML code, you can modify the CSS styles and structure slightly. The goal is to ensure that the file input aligns well with the label and maintains a centered appearance.

<div class="stu-db">
    <div class="container pg-inn d-flex justify-content-center align-items-center flex-column" style="max-width: 600px; padding: 15px;">
        <div class="text-center">
            <img id="profile-preview"
                 src="<?php echo htmlspecialchars($_SESSION['profile_image'] ?? 'images/user.jpg'). '?' . time(); ?>"
                 alt="Profile Image"
                 class="img-fluid rounded-circle mb-3"
                 style="width: 150px; height: 150px;">
            <br><br>

            <form id="saveProfileForm" action="save_image.php" method="post" enctype="multipart/form-data">
                <div class="d-flex align-items-center justify-content-center mb-3" style="gap: 10px;">
                    <label for="profilePicture" class="form-label">Edit Profile Picture:</label>
                    <input type="file" class="form-control file-input" name="profilePicture" id="profilePicture" accept="image/*" required>
                </div>
                <button type="submit" class="btn btn-primary btn-lg mt-3">Save Image</button>
            </form>
        </div>
    </div>
</div>

<style>
.file-input {
    display: inline-block;
    max-width: 250px;
    padding: 5px;
}

.form-label {
    margin-bottom: 0;
    font-weight: 500;
    margin-right: 10px;
}

.d-flex {
    width: 100%;
    justify-content: center; /* Center the label and input */
}
</style>

Key Changes

1. Flexbox Alignment: Added justify-content: center; to the .d-flex class to center the label and input together.
2. Removed Unnecessary Styles: Simplified the CSS for better readability and maintainability.