How to center text within input type="time"?

Asked

Viewed 1,258 times

1

.menor {
   text-align: center;
}
<input class="menor" type="time" id="abre" name="abre" required><br><br>

On the computer, it works normally. But on the phone, the text is not aligned within the box. How to solve this?

html5 css3
  • 2

    Not to get discouraged, but there are styles that are default system and not browser. Maybe in the mobile device it does not accept this type of style, mainly an input with type date, time, tel, etc...

  • @hugocsl did a test on the Galaxy A5 with width and padding-left and it worked.

  • 1

    @Leocaracciolo too good then, and with the text-align in the center worked? For this situation try to use the measure in REM or EM pq px can give problem if the guy increase the font to 20px for example ai vc lose the reference of the standard size

  • @hugocsl text-align no. But you can’t put content bigger than the designated space.

  • The good thing is to work with %, in that case. Thank you, guys.

1 answer

0

You can set it up in the center using the CSS padding-left.

To take effect on all devices set a width and apply a padding-left.

For a width of 100px I put a 22 px padding-left.

CSS

.menor{
    padding-left:22px;
    width: 100px;
 }

HTML

<input class="menor" type="time" id="abre" name="abre" required>

For a width of 200px with size of letters 36 px I put a 50 px padding-left.

.menor{
   padding-left:45px;
   width: 200px;
   font-size: 36px;
 }

The examples have been tested on Chrome, Firefox, Edge, Opera, Safari and Galaxy A5

IE input time does not work

  • Why 22px padding?

  • By the way, why is 22px the center? Where is this account?

  • @Willbill, has common sense when working with CSS. If you have a 300px wide box with text that takes up 150px of space then of course you have to put a 75px left space to center the text.

  • Thanks!!!!!!!!!!!!

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.