2

this css in my view should stretch the "x" over the whole input content.

input{
    height:20px;
    width:20px;
    line-height:20px;
    font-size:20px;
    padding:0;  
}

Instead, there appears to be some font inherited property going on that pushes the "x" down.

I have no idea what that is. Can you help?

I've made a jsfiddle should you want play about with it. http://jsfiddle.net/uc4z20yb/ IMG

thank you

Community
  • 1
  • 1
undefinederror
  • 821
  • 1
  • 8
  • 16
  • possible duplicate of [Is it possible to vertically align text within a div?](http://stackoverflow.com/questions/9249359/is-it-possible-to-vertically-align-text-within-a-div) – Alexus Nov 27 '14 at 00:31
  • Button styles are highly OS-specific. You might want to consider [resetting them](http://fvsch.com/code/button-css/test.html). – Terry Nov 27 '14 at 00:31
  • possible duplicate of [Vertically Align text in a Div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) – Aprillion Nov 27 '14 at 00:33
  • What happens when you give that a `border: none;`? haha – chdltest Nov 27 '14 at 00:34
  • @Terry tried. doesn't do. [link](http://jsfiddle.net/uc4z20yb/2/) – undefinederror Nov 27 '14 at 00:36
  • Don't forget about the font and the font-size. If you use a capital X in a common font it will look more in the middle than a non-capital x. Played a bit with the values and here's a comparison between `x` and `X`. [jsFiddle](http://jsfiddle.net/9awj8m9m/) – Artur K. Nov 27 '14 at 00:45
  • It's not CSS. What's pushing the X down is a property of the OS theme. – Alohci Nov 27 '14 at 01:20

2 Answers2

1

Well, I know it`s not the cleanest solution but you can do this.

<button><span>X</span></button>

Then in css:

button{
 width:20px;
 height:20px;
 padding:0;
 font-weight:20px;
 line-height:20px;
 position:relative;
}

button span{
 position:relative;
 top:-5px;
}

I do not know if you are trying to create a checkbox or the above is just a example, but if you are trying to create a checkbox, there are better ways to do it.

spreadzz
  • 270
  • 3
  • 10
-1

New answer: Ah, I see what you are trying to do here.

In this example I used vertical-align set to baseline with line-height.

JS FIDDLE: http://jsfiddle.net/4fy9k6t9/1/

Also. If you are using the small 'x' it will always be a bit down off the center, because the size of the lette ris determined by it's capital letter height: 'X', so use X. I assume it's a close button.

If you MUST use small 'x' your best bet is padding-bottom: 2px or so.

Alexus
  • 942
  • 7
  • 20
  • vertical-align applies to input elements? – undefinederror Nov 27 '14 at 00:32
  • Applies to just about anything. – Alexus Nov 27 '14 at 00:36
  • thanks @Alexus, but that's not quite what I am after. you are compensating that unknown property that pushed down by x by adding x to padding-bottom (btw, still not vertically aligned if you look carefully). I would like to know what is pushing the text down and reset it. – undefinederror Nov 27 '14 at 00:48