9

I'm trying to understand what makes <button> tag to position text right in the center of the element by default. Horizontal alignment is controlled by the text-align: center. What controls the vertical alignment?

Here is the fiddle to play with: http://jsfiddle.net/GW9KL/

Here is Chrome default stylesheets for <button>. Can't see what makes it vertically aligned.

enter image description here

Websirnik
  • 1,372
  • 3
  • 21
  • 35
  • 1
    Pretty sure it's a part of the `appearance:button` property, but I have no idea. – Niet the Dark Absol Oct 15 '13 at 20:29
  • Good question. I'm not sure browsers really ever let you know what they are doing internally when it comes to form elements. This has been a struggle for web designers for years. – Sébastien Oct 15 '13 at 20:33
  • Your screenshots aren't worth much, you should post the contents of the "Computed" would help a lot more (but not as a screenshot ;-) ). – nietonfir Oct 15 '13 at 20:35
  • 1
    @NiettheDarkAbsol Nope, you can set `-webkit-appearance: none;` and it stays vertically aligned. – nietonfir Oct 15 '13 at 20:40
  • @Sébastien Not really sure why. A good web designer should not style form elements, allowing users to see familiar elements that they can immediate recognise as "I put text here" or "I check this box", rather than presenting them with graphics that are undoubtedly very good looking, but completely alien to the user. – Niet the Dark Absol Oct 15 '13 at 20:41
  • Interestingly, using `text-align` you can change horizontal alignment, but anything I tied to change vertical alignment was simply ignored. – Aleks G Oct 15 '13 at 20:41
  • @NiettheDarkAbsol the operating word here is *good* designer ;) – Sébastien Oct 15 '13 at 20:45

2 Answers2

2

This question intrigued me so I began to investigate. To cut a long story short, in chrome at least, display: -webkit-box; is applied to button elements. I had to install a developer plugin to see it. i have copy and pasted the styling and applied it to a div. A JSfiddle shows the results

Example http://jsfiddle.net/GW9KL/2/

div {
text-align: center;
color: buttontext;
border: 2px outset buttonface;
background-color: buttonface;
font: -webkit-small-control;
-webkit-appearance: button;  
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
  • Not so fast! ;-) Changing the default display of the button to e.g. `display: inline;` doesn't change a thing. Also disabling `-webkit-box-align` in your example changes the vertical alignment. – nietonfir Oct 15 '13 at 21:11
0

Unfortunately, there is no CSS property that defines the vertical alignment of <button> text and it is handled differently depending on the browser it's viewed in. Most solutions involve line-height or padding fixes for quick and dirty, but ultimately it seems best to go with alternatives such as using styled <div> elements.

This post was helpful for me about button text: Position of text in a submit button

Here is the W3C spec on the vertial-align property, which points out that it applies to "inline-level and 'table-cell' elements": http://www.w3.org/TR/CSS2/visudet.html

If you're looking for how browsers decide where the text lies, then the comments on this are correct. It's up to the browser and it's going to be hidden in the code and unmanipulable.

Community
  • 1
  • 1
Marc Ripley
  • 813
  • 1
  • 6
  • 19
  • This is not true. Buttons are stylable elements (even their skeleton is available in the shadow DOM), thus their styles depend on the user agent stylesheet. – nietonfir Oct 15 '13 at 21:02