Aligning the baseline of a YUI button with the baseline of the text next to it

Question

I'd like to display a YUI button next to some text, but the baseline of the YUI button text does not line up with the baseline of the text next to it. The font family and size is identical for both the button text and the text next to it.

If I use a plain HTML button the text baselines correctly line up.

Here's a live example of the problem.

How can I get the text baselines to line up?

Answer 1

Enclose the adjacent text in a span tag with the following styles:

<span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;">
   YUI Button:
</span>

Answer 2

On line 7 in button.css there is

.yui-button {
   display:-moz-inline-box;
   vertical-align:text-bottom;
}

If you remove the vertical-align statement the adjacent text will line up with the button text.

---

Interesting. From the link you provided, numbering from top to bottom, a = aligned, n = not aligned, the different browsers show:

ie6 1 n, 2 n, 3 n 
ie7 1 a, 2 n, 3 n 
ie8 1 a, 2 n, 3 a 
ff2 1 a, 2 n, 3 a 
ff3 1 a, 2 n, 3 n 
saf 1 a, 2 a, 3 a 
chr 1 a, 2 a, 3 a

Removing the vertical align fixes it in ff2 but not ff3.

IE does not support inline-block. That may be causing some of the browser differences.

I don't know why there is such a big difference between safari/chrome, ff2 and ff3.

Answer 3

Since the .yui-button has the property display: inline-block, it will behave like a block but stay inline.

By behaving inline, the box model of this element will be attached to the line while the contents of the button will behave like a block. Thus, you'll have to do some sort of vertical adjustment as Phase suggested.

Since the button has a min-height: 2em, you'll have to do some manual adjustment. This:

.yui-skin-sam .yui-button {
    margin-bottom: -0.5em; /* adjust for 2em min-height */
    vertical-align: baseline; /* use consistent baseline */
}

gave me good results in IE7, FF3, and Chrome, but there is still slight inconsistency among them. You may have explore what other properties are applied at the first span, the first child span, and button that are causing the slight inconsistencies. Of course, you could also adjust the selector to apply to only one instance of the button rather than all yui buttons.

You could also set the min-height to inherit, but then you'll see how the other properties come into play (e.g. the first child (the span in the span before the button) has a block layout).

Alternatively, you could start adding multiple wrappers around the rest of the text so they behave just like the button by building the appropriate spans within spans, but you seem to want to avoid that. If you do, check a couple different browsers.

Answer 4

I had a go at styling the button from scratch. The following CSS is what I came up with. It has the advantage that the adjacent text to the button does not need to be wrapped in any additional elements. It works fine in the latest version of Internet Explorer, Firefox, and Safari. Firefox 2 doesn't correctly size the button height, and IE 6 and 7 each butcher it in their own special ways.

Here's a live example of this code.

.yui-button {
  display: inline-block;
  background: transparent url(http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/sprite.png) repeat-x scroll 0 0;
  border-color: #808080;
  border-style: solid;
  border-width: 1px 0;
  margin: auto 0.25em;
}
.yui-skin-sam .yui-button .first-child {
  display: inline-block;
  border-color: #808080;
  border-style: solid;
  border-width: 0 1px;
  margin: 0 -1px;
}
.yui-skin-sam .yui-button button {
  background-color: transparent;
  border: medium none;
  margin: 0;
  min-height: 2em;
  padding: 0 10px;
}

Answer 5

You could try using a negative margin-bottom to pull the button down vertically; if you use the same value as the padding that's on the text within the button, or on the button itself, it might be positioned properly.

I'm at work, and writing this on IE6 (I know, I know...), so I'm not really able to look too closely (no Firebug, etc -not an IT professional), but if you used vertical-align: baseline; or something similar it positions the element, not the text within it, to the baseline of the surrounding text.

You could, alternately, try using line-height: $height; where $height is equal to the vertical height of the button; which forces the surrounding text to be vertically centered within that height. No guarantees, but it might/should work.

Answer 6

To have the button aligned with the text next to it:

1. Make sure the button (a div in this case) is inline-block. This is really the hard part, so I did a little write-up on how to get IE6+ and other browsers to honor the inline-block.
2. Add a vertical-align: middle on the button and the text.