0

I have a table with numbers which I center in the cell. One row has number inputs which I center with text-align: center. The problem is that the number is centered in the inputbox without area for the arrows (spinner). I want the value to be centered in the cell.

One solution would be to adjust the margin but I've found that the width of the spinner changes with the width of your screen. I would not like to use de margin option (unless it's possible with percentage or something)

A minimal working example of my code is:

<table>
<tr>
<td style="text-align:center">5</td>
<td style="text-align:center">10</td>
</tr>
<tr>
<td><input type="number" style="text-align:center" value=15></td>
<td><input type="number" style="text-align:center" value=8></td>
</tr>
</table>

This is what I get now, but I hope you see that it's not really nice preview

All help is appreciated!

BTW: not a duplicate of Center text in html number input as he is concerned about consequently centering in the input box whether the spinner is shown or not. I want the value centered in the table cell.

Nuwan Alawatta
  • 1,812
  • 21
  • 29
C. Binair
  • 419
  • 4
  • 14

1 Answers1

2

If I'm understanding correctly, you want all of the values to be centered. One way to do this is apply text-align: center to all <td> elements and hide number input arrows. Here's the css and accompanying fiddle:

EDIT:

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
  opacity: 1;
  margin-left: -14px;
}

td {
  text-align: center;
}

#table1 input {
  width: 100px;
}

#table2 input {
  width: 400px;
}

#table3 input {
  width: 1000px;
}

https://jsfiddle.net/k9jdyawc/2/

Joseph Cho
  • 4,033
  • 4
  • 26
  • 33
  • That would result in all being centered indeed. I, however, would like to have the input arrows if possible – C. Binair Aug 16 '18 at 18:46
  • 1
    In that case you can use `negative margins` to account for the input arrows always being there. Assuming the arrows width is about 15px you can do this: https://jsfiddle.net/snbfjceo/4/ – Joseph Cho Aug 16 '18 at 18:48
  • If you are curious, negative margins are an important concept that would study eventually: https://stackoverflow.com/questions/11495200/how-do-negative-margins-in-css-work-and-why-is-margin-top-5-margin-bottom5 The second answer with visual examples is particularly good. – Joseph Cho Aug 16 '18 at 18:49
  • Yes that is what I meant with the margins. However the arrows width changes depending on your screen size so I would have liked it better to have something responsive as well instead of a fixed 15px which is not the width of the arrow in all cases. – C. Binair Aug 16 '18 at 18:52
  • The arrow sizes shouldn't change with screen size unless you have some other styling going on. Here is an example with multiple input widths but the arrow widths staying the same: https://jsfiddle.net/snbfjceo/17/ You mentioned percentages earlier. Something like `margin-left: -10%;` is also valid css. – Joseph Cho Aug 16 '18 at 19:08
  • I use bootstrap. Maybe that causes the sizing. I will just try if I can find a good value as percentage. Thanks for you help any way. – C. Binair Aug 16 '18 at 19:12
  • Hmm bootstrap may be it. Here is a fiddle with bootstrap: https://jsfiddle.net/k9jdyawc/1/ Can you send me a screen shot of what your app looks like with my changes? – Joseph Cho Aug 16 '18 at 19:27
  • With your adjustment the alignment is a bit off still. https://i.stack.imgur.com/CLg7h.jpg – C. Binair Aug 17 '18 at 05:10
  • Do you mind tweaking the margin-left to something like -12px? Also how does it look on different screen sizes. – Joseph Cho Aug 17 '18 at 06:37
  • I have it at -14px now. And the outlining is negligible on smaller or bigger screens as I have seen so far. If you change it to -14px in you answer, I'll accept it as answer! – C. Binair Aug 17 '18 at 10:09
  • Sure thing. Thanks – Joseph Cho Aug 17 '18 at 14:07