CODEWITHSUNDEEP
htmlcss
yuriyu
yuriyu

Reputation: 73

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

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;
}

Upvotes: 0

Views: 140

Answers (1)

Alexis
Alexis

Reputation: 412

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 ;)

Upvotes: 1

Related Questions