How to align content in an input type "file" element?

Question

I have created input field of type "file" with some text inside the box. How do I make the text inside responsive so that it is aligned in the center in all screen sizes? Right now the text seems to be starting from the middle of the input element.

#profile_video_container {
    position: relative;
}

#profile_video_container header {
    text-align: left;
    color: #443f3f;
}

#profile_video_container input {
    border: 0px solid #92b0b3;
    background: #f1f1f1;
    outline: 2px dashed #92b0b3;
    outline-offset: -10px;
    padding: 80px 0px 100px 150px;
    text-align: center !important;
    width: 520px;
}

#profile_video_container input:hover {
    background: #ddd;
}

#profile_video_container:before {
    position: absolute;
    bottom: 80px;
    align-content: center;
    content: " (or) Drag and Drop bio video here. ";
    color: #3f8188;
    font-weight: 900;
}

Please provide a [Minimum Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Zach Jensz, Nov 07 '22 at 09:57
Have you tried this: https://stackoverflow.com/a/47950538/904375 — Zeeshan S., Nov 07 '22 at 10:14

Alexis · Answer 1 · 2022-11-07T11:06:05.923

By reading your CSS, I believe you have a parent div with the id profile_video_container. And you have an input in it that you want to place at the middle of the screen (so, in the middle of the container).

What I'd recommend you doing is giving your container some flexbox propertys :

display: flex This will make the parent use Flexbox
justify-content: center This will make the child place in the middle of the screen on the horizontal axis
align-items: center This will make the child place in the middle of the screen on the vertical axis

Try giving more informations next time, like the HTML and Screeshot per exemple because I might be wrong and not really getting your issue ;)

How to align content in an input type "file" element?

1 Answers1